6

我正在尝试加载 pdf.js 网络工作者，但我不能！？

在浏览器中打开时该 URL//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]);
}
4

2 回答 2

5

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

引用网络工作者规范：

如果解析后的 URL 的方案组件不是“数据”，并且生成的绝对 URL 的来源与入口脚本的来源不同，则抛出 SecurityError 异常并中止这些步骤。

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

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

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

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

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

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

.htaccess如果您安装了 mod_headers 模块，您可以通过 Apache 上的文件执行此操作。您需要添加如下内容：

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

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

于 2013-06-02T10:27:16.100 回答
1

我最近遇到了这个问题，实际上有一个从远程主机加载工作人员的解决方案，尽管它需要一些 javascript。正如我在最近的一篇博文中详述的那样，您可以使用 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);
    });
}

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

于 2014-08-07T19:46:18.760 回答