import React from 'react';
import { Page, usePDF, Text, Document, StyleSheet, PDFDownloadLink } from '@react-pdf/renderer';
import { Button, Input } from 'reactstrap';
import "./index.css"
const styles = StyleSheet.create({
body: {
paddingTop: 35,
paddingBottom: 65,
paddingHorizontal: 35,
},
title: {
fontSize: 24,
textAlign: 'center',
},
author: {
fontSize: 12,
textAlign: 'center',
marginBottom: 40,
},
subtitle: {
fontSize: 18,
margin: 12,
},
text: {
margin: 12,
fontSize: 14,
textAlign: 'justify',
},
image: {
marginVertical: 15,
marginHorizontal: 100,
},
header: {
fontSize: 12,
marginBottom: 20,
textAlign: 'center',
color: 'grey',
},
pageNumber: {
position: 'absolute',
fontSize: 12,
bottom: 30,
left: 0,
right: 0,
textAlign: 'center',
color: 'grey',
},
});
const PdfFile = ({ text }) => (
<Document>
<Page style={styles.body}>
<Text style={styles.header} fixed>
~ Created by Murali ~
</Text>
<Text style={styles.title}>Pdf converter</Text>
<Text style={styles.author}>Murali chowhan</Text>
<Text style={styles.text}>
{/* <pre> */}
{text}
{/* </pre> */}
</Text>
<Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => (
`${pageNumber} / ${totalPages}`
)} fixed />
</Page>
</Document>
);
export default function PdfConvert() {
const [text, setText] = React.useState("");
function handleChange(e) {
if (e.key === "Enter") {
setText(`${e.target.value}\n`);
}
setText(e.target.value);
}
return (
<>
<div className='text-area-main-cont'>
<Input
type='textarea'
rows={4}
style={{ width: "60vw", minHeight: "50vh" }}
value={text}
onChange={handleChange}
onPressEnter={handleChange}
/>
</div>
<div className='pdf-download-btn-cont'>
<PDFDownloadLink document={<PdfFile text={text} />} fileName="test.pdf">
{({ blob, url, error }) =>
<Button color='success' outline>
<a href={url} target="_blank"
download="test.pdf" style={{ color: "black", textDecoration: "none" }}>
Download
</a>
</Button>
}
</PDFDownloadLink>
</div>
</>
)
}