All geek questions in one place

Failed to load script - Webworker (PDF.JS)

I am trying to download the pdf.js webworker file, but I cannot !?

The URL //cdn.localhost/js/pdf/worker_loader.js?v=280 exists when you open it in a browser

Error

 Failed to load script: //cdn.localhost/js/pdf/worker_loader.js?v=280 (nsresult = 0x805303f4)

html (URL = // secure.localhost)

 <!DOCTYPE html> <html> <head></head> <body> <script type="text/javascript" src="//cdn.localhost/js/pdf/core.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/util.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/api.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/canvas.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/obj.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/function.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/charsets.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/cidmaps.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/colorspace.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/crypto.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/evaluator.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/fonts.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/glyphlist.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/image.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/metrics.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/parser.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/pattern.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/stream.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/worker.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/bidi.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/jpg.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/jpx.js?v=280"></script> <script type="text/javascript" src="//cdn.localhost/js/pdf/jbig2.js?v=280"></script> <script type="text/javascript"> PDFJS.workerSrc = '//cdn.localhost/js/pdf/worker_loader.js?v=280'; PDFJS.getDocument(voucher_url).then(function(pdf){ pdf.getPage(1).then(function(page){ var scale = 1.5, viewport = page.getViewport(scale), canvas = document.createElement('canvas'), context = canvas.getContext('2d'); $(canvas).appendTo(container); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); </script> </body> </html>

//cdn.localhost/JS/PDF/worker_loader.js? V = 280

 'use strict'; // List of files to include; var files = [ 'core.js', 'util.js', 'canvas.js', 'obj.js', 'function.js', 'charsets.js', 'cidmaps.js', 'colorspace.js', 'crypto.js', 'evaluator.js', 'fonts.js', 'glyphlist.js', 'image.js', 'metrics.js', 'parser.js', 'pattern.js', 'stream.js', 'worker.js', 'jpx.js', 'jbig2.js', 'bidi.js', 'jpg.js' ]; // Load all the files. for (var i = 0; i < files.length; i++) { importScripts(files[i]); }
+4
source share
2 answers

Your problem is that you are trying to use a web worker to download a script from another domain. Error number 0x805303f4 means "Access to restricted URI denied."

Citation Web Workers Specification :

If the schema component of the resulting parsed URL is not “given,” and the origin of the final absolute URL does not match the start of the script entry, then throw a SecurityError exception and abort these steps.

Note. Thus, the scripts must be either external files with the same schema and host, or port as the source page or data: URL.

One way to solve this problem is to move the worker_loader script to the same domain as the html page. So, you would initialize workerSrc something like this:

 PDFJS.workerSrc = 'worker_loader.js?v=280';

And then you will also need to update the worker_loader script to use absolute URLs, so the import loop might look something like this:

 for (var i = 0; i < files.length; i++) { importScripts('//cdn.localhost/js/pdf/'+files[i]); }

Also, depending on the location of voucher_url , which may also generate a cross-domain security error, as this is loaded via XMLHttpRequest . If so, you need to set the Access-Control-Allow-Origin header in the pdf-serving domain.

You can do this using the .htaccess file on Apache if you have the mod_headers module installed. You need to add something like this:

 Header set Access-Control-Allow-Origin "http://secure.localhost"

If you need to support multiple hosts, you can use "*" instead of the host name, but this is usually not recommended for security reasons.

+3
source

I recently ran into this problem, and there really is a solution for downloading a worker from a remote host, although this requires some javascript. When I talk in detail about a recent blog post , you can download it using AJAX (you need to configure CORS headers), and then you can create a Blob URL from the AJAX response and set this as PDFJS.workerUrl.

 var cachedJSDfd = null; function loadWorkerURL(url){ if (cachedJSDfd) { return cachedJSDfd; } cachedJSDfd = PDFJS.createPromiseCapability(); var xmlhttp; xmlhttp=new XMLHttpRequest(); //the callback function to be callled when AJAX request comes back xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ var workerJSBlob = new Blob([xmlhttp.responseText], { type: "text/javascript" }); cachedJSDfd.resolve(window.URL.createObjectURL(workerJSBlob)); } }; xmlhttp.open("GET",url,true); xmlhttp.send(); return cachedJSDfd.promise; } function initWebWorker() { return loadWorkerURL('http://www.domain.com/path/to/worker.js')).then(function(blob) { PDFJS.workerSrc = blob; return PDFJS; }); } function openPdf(url) { return initWebWorker().then(function(PDFJS) { return PDFJS.getDocument(url); }); }

More details in the blog post above.

0
source

Source: https://habr.com/ru/post/1483547/

More articles:


All Articles