Open margintopt opened 8 months ago
There's no direct way of doing this in v7. It will be possible with v8 as pdf.js 4.x supports it. Until then, perhaps lazy load the entire component?
There's no direct way of doing this in v7. It will be possible with v8 as pdf.js 4.x supports it. Until then, perhaps lazy load the entire component?
Can I clone the library myself and then use webpack external to reduce the size of the pdfjs part?
I guess you could! I don't know much about this process, but react-pdf is open source and everything is allowed, feel welcome to experiment!
This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.
I implemented the complete component as an asynchronous import within a Suspense and it works well and keeps my package size small. Not sure if this satisfies your needs though let me know if you need some code sample.
@nikischin - Any chance you're able to share that code?
Sure! Basically like this:
const PDFViewer = React.lazy(()=> import('./PDFViewer'));
export interface URLPDFViewerProps { url?: string, orientation?: 'portrait' | 'landscape' }
export default function URLPDFViewer (props: URLPDFViewerProps) {
return (
<Suspense fallback={<Spinner animation='border' />}>
<PDFViewer {...props} />
</Suspense>
);
}
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs',
import.meta.url,
).toString();
export interface URLPDFViewerProps { url?: string, orientation?: 'portrait' | 'landscape' }
export default function PDFViewer ({ url, orientation }: URLPDFViewerProps) {
return (
<Document
file={url}
loading={<div><Spinner animation='grow' /></div>}
>
<Page
height={orientation === 'portrait' ? 360 : undefined}
width={orientation === 'portrait' ? undefined : 360}
/>
</Document>
);
}
Before you start - checklist
Description
// pdj.ts in react-pdj
import * as pdfjsModule from 'pdfjs-dist';
const pdfjs = ( 'default' in pdfjsModule ? pdfjsModule['default'] : pdfjsModule ) as typeof pdfjsModule;
export default pdfjs;
Proposed solution
external script load pdf.js
Alternatives
No response
Additional information
No response