Replies: 1 comment
-
hey @nicholsss, I had to do something similar recently and ended up using react-pdf to preview the document so thought it might help here how i have done; import React, { useState, useEffect } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import YourPDFDocument from './yourdocument';
import { usePDF } from '@react-pdf/renderer';
pdfjs.GlobalWorkerOptions.workerSrc = '/js/pdf.worker.min.js';
const Preview = () => {
const [numPages, setNumPages] = useState(null);
const [instance, updateInstance] = usePDF({ document: <YourPDFDocument /> });
useEffect(() => {
updateInstance();
}, []);
const onDocumentLoadSuccess = ({ numPages }) => {
setNumPages(numPages);
};
return (
<div>
<Document
file={instance.url}
onLoadSuccess={onDocumentLoadSuccess}
>
{Array.from(new Array(numPages), (el, index) => (
<Page key={index} pageNumber={index + 1} />
))}
</Document>
</div>
);
};
export default Preview; |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I'm wondering if there is a way to have a live preview of the PDF that I'm currently working on. I'm building a Resume Builder application with Next.js, and having a live preview of the resume is a crucial functionality. I found the React-PDF REPL example: https://github.com/diegomura/react-pdf-site/tree/master/src/components/Repl
https://react-pdf.org/repl
So, basically, I'm looking to achieve the same behaviour as the REPL has, so if there is a change in the data, it would update the PDF also with the new data.
Beta Was this translation helpful? Give feedback.
All reactions