错误

Question

我正在尝试加载pdf.js webworker，但我不能！？

在浏览器中打开网址时，存在网址//cdn.localhost/js/pdf/worker_loader.js?v=280

错误

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]);
}

Answer 1

您的问题是您尝试使用Web Worker从其他域加载脚本。错误号0x805303f4表示“访问受限制的URI被拒绝”。

引用Web workers specification：

如果生成的解析URL的方案组件不是“data”，并且生成的绝对URL的原点与条目脚本的原点不同，则抛出SecurityError异常并中止这些步骤。

注意：因此，脚本必须是具有与原始页面相同的方案，主机和端口的外部文件，或者数据：URL。

解决此问题的一种方法是将worker_loader脚本移动到与html页面相同的域中。所以你要初始化workerSrc这样的东西：

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

然后你还需要更新worker_loader脚本以使用绝对URL，因此import循环可能会变成这样：

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

此外，根据托管voucher_url的位置，这也可能会生成跨域安全错误，因为它是通过XMLHttpRequest加载的。如果是这种情况，您需要在为pdf提供服务的域中设置Access-Control-Allow-Origin标题。

如果安装了mod_headers模块，可以通过Apache上的.htaccess文件执行此操作。你需要添加这样的东西：

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

如果您需要支持多个主机，则可以使用"*"而不是主机名，但出于安全原因，通常不建议这样做。

Answer 2

我最近遇到了这个问题，实际上有一个从远程主机加载worker的解决方案，虽然它需要一些javascript。正如我详细介绍in a recent blog post，你可以使用AJAX加载它（你需要配置你的CORS头）然后你可以从AJAX响应中创建一个Blob URL并将其设置为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);
    });
}

上面链接的博客文章中的更多细节。

无法加载脚本 - Webworker（PDF.JS）

错误

html（URL = //secure.localhost）

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

2 个答案: