He seguido un tutorial rápido sobre cómo implementar el visor de PDF de Mozilla con React. He hecho un codesanbox aquí . Me gustaría saber si esto es posible de implementar con el módulo de nodo de importación de pdfjs. Entonces, en lugar de descargar el paquete en una carpeta pública para usarlo con la importación:
export default class PDFJs { init = (source, element) => { const iframe = document.createElement("iframe"); iframe.src = `/pdfjs-2.5.207-dist/web/viewer.html?file=${source}`; iframe.width = "100%"; iframe.height = "100%"; element.appendChild(iframe); }; }Además, este tipo de configuración no funciona cuando el origen del PDF es una URL. Si hago eso me sale un error:
PDF.js v2.5.207 (compilación: 0974d6052) Mensaje: el origen del archivo no coincide con el del espectador
He comentado la parte del código donde verifica el origen del archivo en pdfjs-2.5.207-dist/web/viewer.js :
//if (origin !== viewerOrigin && protocol !== "blob:") { // throw new Error("file origin does not match viewer's"); //}Pero, luego recibí un error:
PDF.js v2.5.207 (compilación: 0974d6052) Mensaje: No se pudo recuperar
¿Cómo puedo arreglar esto? ¿Es posible importar este paquete como un módulo en el componente de reacción y cómo puedo usarlo para archivos PDF desde recursos externos con URL?
El pdf debe estar ubicado en el mismo host (incluido el mismo protocolo). Alojar el pdf en la misma URL que su aplicación/sitio web debería resolver este problema.
Permitir que un pdf se cargue en otras páginas puede generar varios riesgos de seguridad.
Si desea mostrar una versión actualizada de un pdf externo en su propia página de inicio, existen básicamente dos opciones.
Alojar PDF en su servidor
Ejecutar un script de servidor (cron) que descarga el pdf y lo aloja en su propio servidor.
Permitir origen cruzado
Si tiene acceso al servidor que aloja el pdf, puede enviar encabezados para permitir el origen cruzado.
Access-Control-Allow-Origin: * La documentación sobre esto es realmente mala, pero tienen un repositorio pdfjs-dist y algunos documentos relacionados.
Instalación
npm install pdfjs-distUso (de DOC )
import * as pdfjsLib from 'pdfjs-dist'; var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf'; // The workerSrc property shall be specified. pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'; // Asynchronous download of PDF var loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then(function(pdf) { console.log('PDF loaded'); // Fetch the first page var pageNumber = 1; pdf.getPage(pageNumber).then(function(page) { console.log('Page loaded'); var scale = 1.5; var viewport = page.getViewport({scale: scale}); // Prepare canvas using PDF page dimensions var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // Render PDF page into canvas context var renderContext = { canvasContext: context, viewport: viewport }; var renderTask = page.render(renderContext); renderTask.promise.then(function () { console.log('Page rendered'); }); }); }, function (reason) { // PDF loading error console.error(reason); });Trabajador del servicio
Necesita el trabajador de servicio: pdfjs no funciona sin él, por lo que tampoco reacciona.
Si usa CRA y no desea usar CDN, puede realizar los siguientes pasos:
1) Copie el trabajador a la carpeta pública
cp ./node_modules/pdfjs-dist/build/pdf.worker.js public/scripts2) Registrar trabajador de servicio
pdfjsLib.GlobalWorkerOptions.workerSrc = `${process.env.PUBLIC_URL}/scripts/pdf.worker.js`Aquí hay una caja de códigos de trabajo con el visor de Mozilla y su pdf.
Cosas a tener en cuenta:
Contenido mixto: la página en 'https://codesandbox.io/' se cargó a través de HTTPS, pero solicitó un recurso inseguro 'http://www.africau.edu/images/default/sample.pdf'. Esta solicitud ha sido bloqueada; el contenido debe servirse a través de HTTPS.
Access-Control-Allow-Origin , o estar en el mismo origen; de lo contrario, obtendrá este error:El acceso para buscar en 'https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf' desde el origen 'https://lchyv.csb.app' ha sido bloqueado por la política CORS: No El encabezado 'Access-Control-Allow-Origin' está presente en el recurso solicitado. Si una respuesta opaca satisface sus necesidades, establezca el modo de la solicitud en 'no-cors' para obtener el recurso con CORS deshabilitado.
https://cors-anywhere.herokuapp.com/<URL_TO_PDF> , que establece Access-Control-Allow-Origin: * para usted, ¡pero no debe usarse en producción! Entonces, en conclusión, su pdf no se cargó debido a las restricciones del navegador. Importar pdfjs directamente en su aplicación y crear un visor desde cero (que es mucho trabajo) no resolverá esos problemas.
Realizo cambios en su ejemplo para que acepte una URL
Mi código a continuación
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry"; const pdfjsLib = import("pdfjs-dist/build/pdf"); export default class PDFJs { init = (source, element) => { pdfjsLib.then((pdfjs) => { pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker; var loadingTask = pdfjs.getDocument(`${source}`); loadingTask.promise.then((pdf) => { pdf.getPage(1).then((page) => { var scale = 1.5; var viewport = page.getViewport({ scale: scale }); var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); canvas.height = viewport.height; canvas.width = viewport.width; element.appendChild(canvas); var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); }); }; }Puedes ver el resultado aquí