Menu
I'm trying to load the pdf.js webworker, but I can't!?
The URL //cdn.localhost/js/pdf/worker_loader.js?v=280 exists when opening it in the browser
Failed to load script: //cdn.localhost/js/pdf/worker_loader.js?v=280
(nsresult = 0x805303f4)
<!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>
'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]);
}
574
Your problem is that you're attempting to use a Web Worker to load a script from a different domain. The error number 0x805303f4 means "Access to restricted URI denied".
Quoting the Web workers specification:
If the scheme component of the resulting parsed URL is not "data", and the origin of the resulting absolute URL is not the same as the origin of the entry script, then throw a SecurityError exception and abort these steps.
Note: Thus, scripts must either be external files with the same scheme, host, and port as the original page, or data: URLs.
One way of solving this problem is to move the worker_loader script onto the same domain as the html page. So you would be initialising workerSrc something like this:
PDFJS.workerSrc = 'worker_loader.js?v=280';
And then you'd also need to update the worker_loader script to use absolute urls, so the import loop might become something like this:
for (var i = 0; i < files.length; i++) {
importScripts('//cdn.localhost/js/pdf/'+files[i]);
}
Also, depending on where the voucher_url is hosted, that may also generate a cross domain security error, as that is loaded via an XMLHttpRequest. If that is the case, you'll need to set the Access-Control-Allow-Origin header on the domain that serves the pdf.
You can do this via a .htaccess file on Apache if you have the mod_headers module installed. You'll 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 that isn't generally advisable for security reasons.
130
I recently ran into this issue and there actually is a solution for loading the worker from a remote host, though it requires some javascript. As I detailed in a recent blog post, you can load it using AJAX (you'll need to configure your CORS headers) and then you can create a Blob URL from the AJAX response and set that as the 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 specifics in the blog post linked above.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
