pdfjs-dist-dj

import * as pdfjsLib from 'pdfjs-dist/build/pdf'; // For modern bundlers, importing the worker entry point can automatically configure the worker. // If this does not work or for more control, explicitly set pdfjsLib.GlobalWorkerOptions.workerSrc. import 'pdfjs-dist/build/pdf.worker.entry'; async function renderPdf(pdfUrl: string, canvasId: string) { // For production deployments, ensure `pdf.worker.js` is accessible in your public directory // and set its path here if `pdf.worker.entry` import isn't sufficient. // Example: pdfjsLib.GlobalWorkerOptions.workerSrc = '/static/js/pdf.worker.js'; try { const loadingTask = pdfjsLib.getDocument(pdfUrl); const pdf = await loadingTask.promise; const pageNumber = 1; const page = await pdf.getPage(pageNumber); const scale = 1.5; const viewport = page.getViewport({ scale: scale }); // Prepare canvas using PDF page dimensions const canvas = document.getElementById(canvasId) as HTMLCanvasElement; if (!canvas) { console.error(`Canvas element with ID '${canvasId}' not found. Ensure it exists in your HTML.`); return; } const context = canvas.getContext('2d'); if (!context) { console.error(`Could not get 2D rendering context for canvas '${canvasId}'.`); return; } canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: context, viewport: viewport, }; await page.render(renderContext).promise; console.log(`PDF page ${pageNumber} rendered successfully to canvas: ${canvasId}`); } catch (error) { console.error('Error rendering PDF:', error); } } // To run this, add `<canvas id="pdf-canvas"></canvas>` to your HTML body. // Replace the example URL with your desired PDF document's URL. const examplePdfUrl = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba24304899580b080f5d54030d321d5c22501d51/web/compressed.tracemonkey-pldi-09.pdf'; renderPdf(examplePdfUrl, 'pdf-canvas');