Te sugerimos que pruebes esta resolución en un entorno controlado antes de enviarlo a producción, un saludo.
Solución:
La comunidad de PDF.js no es útil, y años después todavía no hay una respuesta definitiva para que el visor.html funcione, con cors. Para omitir todo el código JS que le impide tener problemas entre navegadores, puede seguir estos pasos:
Esta solución es usar su visor.html predeterminado, que ya está muy bien hecho, con css y todas las funciones, y NO TIENES QUE construir todo tu visor.
- Asegúrese de que cuando use pdf.js, su solicitud envíe encabezado – ORIGEN
- Asegúrese de que sea cual sea el servidor que esté utilizando, puede agregar encabezados para CORS,
IE: Acceso-Control-Permitir-Origen *
Como sabes, para usar el visor, debes usar: https://yourserver/dir/viewer.html?file=PDF_URL
la URL del pdf debe estar codificada en urlen, de modo que cuando pase el enlace, use el código:
var urlEncoded = encodeURI(url);Editar visor.js
-
Busque la función que carga su archivo PDF/URL (línea ~1325): “var loadingTask = (0, _pdfjsLib.getDocument)” o “getDocument”
-
Por encima de esa línea, obtenga la URL para el pdf de get params, cuando llamó a viewer.html?file=url (que puede tener get params, si usa servidores CDN):
/*
fetch the filename and params from the [viewer.html?file=some.place/on.the/internet/somefile.pdf?Expiry=2343243&somekey=3342343&other], which is the part [some.place/on.the/internet/somefile.pdf?Expiry=2343243&somekey=3342343&other]
Note: Use regex if you please.... Here is just for simplicity sake
*/
let _realURL = window.location.href;
// split away the html and get the file=xxxx
let getParamsIndex = _realURL.indexOf("?");
let fileParamKeyValue = _realURL.substring(getParamsIndex+1);
// get the pdf file plus all it's required get params (if exists)
let getEqualsIndex = fileParamKeyValue.indexOf("=");
let pdfFile = fileParamKeyValue.substring(getEqualsIndex+1);
//original line to search
loadingTask = (0, _pdfjsLib.getDocument)(parameters);- Ahora que tiene el archivo pdf, cambie el código existente de la siguiente manera:
//don't use this which breaks if your pdf requires get parameters
//var loadingTask = (0, _pdfjsLib.getDocument)(parameters);
//uses the pdfFile url link we created above
var loadingTask = (0, _pdfjsLib.getDocument)(pdfFile);- Busque “lanzar un nuevo error (‘el origen del archivo no coincide”, sobre la línea 1865
- Comente esta verificación de javascript para el origen del archivo
if (fileOrigin !== viewerOrigin)
//don't throw the error, allow the file to be retrieved!!!!
//throw new Error('file origin does not match viewer's');
- Nota: en la línea 1853, verá:
var HOSTED_VIEWER_ORIGINS = ['null', 'http://mozilla.github.io', 'https://mozilla.github.io'];Puede usar esto para especificar servidores específicos para permitir CORS, pero al deshabilitar la excepción throws, puede aceptar cualquier servidor. De todos modos, ¿por qué pondrían este HOSTED_VIEWER_ORIGINS en el código base, si querían que lo usáramos?
Finalmente encontré el problema. Mi servidor no estaba pasando el Access-Control-Allow-Credentials: true encabezado a la respuesta, que era necesaria (la solicitud xhr se envió con xhr.withCredential).
CORS ahora funciona correctamente.
Encontré la solución en: https://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
Tienes la opción de añadir valor a nuestro contenido tributando tu veteranía en las interpretaciones.