Open aminkassim opened 3 weeks ago
import React, { useState } from 'react'; import { PDFDownloadLink } from '@react-pdf/renderer'; import FormComponent from './FormComponent'; import PdfDocument from './PdfDocument';
const App = () => { const [formData, setFormData] = useState(null);
const handleFormSubmit = (data) => { setFormData(data); };
return ( <div style={{ textAlign: 'center', marginTop: '20px' }}>
<FormComponent handleSubmit={handleFormSubmit} />
{formData && (
<PDFDownloadLink
document={<PdfDocument data={formData} />}
fileName="formData.pdf"
>
{({ blob, url, loading, error }) =>
loading ? 'Generating PDF...' : 'Download PDF'
}
</PDFDownloadLink>
)}
</div>
); };
export default App;
<PDFDownloadLink className='styles' document={<PDFComponent {...props}/>} fileName="example.pdf"
{({ blob, url, loading, error }) => { const handleClick = (event: any) => { event.preventDefault();
if (!blob) return;
const blobUrl = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = blobUrl;
link.download = "example.pdf";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
return (
<span
role="button"
onClick={handleClick}
className={
loadingState === LoadingState.LOADING
? styles["text-disabled"]
: ""
}
>
Download
</span>
);
}}
</PDFDownloadLink>
I used this and it worked
I ran into this same problem and what I found weird is that it works without Text
elements, but when using text loading
is never set to false
. Based on discussions on a different issue, it happens when using custom fonts in the text, it's caused by a dependency of react-pdf
, this helped me https://github.com/diegomura/react-pdf/issues/2675#issuecomment-2000121503.
<PDFDownloadLink document={<RptInvoice {...reportData} />} fileName={orderView.invoice_no + ".pdf"} className="hover:cursor-pointer hover:underline text-blue-500"
The code above cant working on my code, why?