问题描述
我正在尝试加载pdf.js Webworker，但我不能！?
I'm trying to load the pdf.js webworker, but I can't!?
URL //cdn.localhost/js/pdf/worker_loader.js?v=280在浏览器中打开时存在
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)
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]);
}
推荐答案
您的问题是您试图使用Web Worker从其他域加载脚本.错误号0x805303f4表示拒绝访问受限制的URI".
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".
引用网络工作者规范:
注意:因此，脚本必须是具有与原始页面相同的方案，主机和端口的外部文件，或者是数据:URL.
Note: Thus, scripts must either be external files with the same scheme, host, and port as the original page, or data: URLs.
解决此问题的一种方法是将worker_loader脚本移到与html页面相同的域中.因此，您将初始化workerSrc这样的东西:
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';
然后您还需要更新worker_loader脚本以使用绝对URL，因此导入循环可能会变成这样:
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]);
}
此外，根据托管voucher_url的位置，还可能会生成跨域安全性错误，因为该错误是通过XMLHttpRequest加载的.如果是这种情况，则需要在提供pdf的域上设置Access-Control-Allow-Origin标头.
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.
如果已安装mod_headers模块，则可以通过Apache上的.htaccess文件执行此操作.您需要添加以下内容:
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.
这篇关于无法加载脚本-Webworker(PDF.JS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！