PDFJS 未在 pdf.worker.js 中定义（Backbone+Marionette+pdf.js）答案

【问题标题】：PDFJS is not defined in pdf.worker.js (Backbone+Marionette+pdf.js)PDFJS 未在 pdf.worker.js 中定义（Backbone+Marionette+pdf.js）
【发布时间】：2014-07-23 14:07:54
【问题描述】：

我想使用 pdf.js 在 Backbone.js/Marionette 视图中呈现 PDF，但 PDFJS 未在在 pdf.worker.js 中定义。然而，它是在主干视图本身中定义的，也可以通过控制台访问。

这是视图的代码：

module.exports = PDFView = Marionette.ItemView.extend({
    template: require('../../../templates/pdf_frame.hbs'),
    onRender: function(){
        var PDF_PATH = '../../pdf/websummitpitch.pdf';
        var PAGE_NUMBER = 1;
        var PAGE_SCALE = 1.5;
        var SVG_NS = 'http://www.w3.org/2000/svg';

        if (PDFJS) {
            console.log("PDFJS is loaded in Backbone View");
        } else {
            console.log("PDFJS is NOT loaded in Backbone View");
        }

        PDFJS.workerSrc = "/js/pdf.worker.js";
        console.log("workerSrc is set to ", PDFJS.workerSrc);

        // Loading document and page text content
        PDFJS.getDocument({url: PDF_PATH}).then(function (pdfDocument) {
            console.log("get document");

            pdfDocument.getPage(PAGE_NUMBER).then(function (page) {
                console.log("get page");

                var viewport = page.getViewport(PAGE_SCALE);
                page.getTextContent().then(function (textContent) {
                    // building SVG and adding that to the DOM
                    var svg = this.buildSVG(viewport, textContent);

                    // render svg in <canvas id="render"> in template
                    document.getElementById('render').appendChild(svg);
                });
            });
        });
    },
    buildSVG: function(viewport, textContent) {
        // Building SVG with size of the viewport (for simplicity)
        var svg = document.createElementNS(SVG_NS, 'svg:svg');
        svg.setAttribute('width', viewport.width + 'px');
        svg.setAttribute('height', viewport.height + 'px');
        // items are transformed to have 1px font size
        svg.setAttribute('font-size', 1);

        // processing all items
        textContent.items.forEach(function (textItem) {
            // we have to take in account viewport transform, which incudes scale,
            // rotation and Y-axis flip, and not forgetting to flip text.
            var tx = PDFJS.Util.transform(
                PDFJS.Util.transform(viewport.transform, textItem.transform),
                [1, 0, 0, -1, 0, 0]);
            var style = textContent.styles[textItem.fontName];
            // adding text element
            var text = document.createElementNS(SVG_NS, 'svg:text');
            text.setAttribute('transform', 'matrix(' + tx.join(' ') + ')');
            text.setAttribute('font-family', style.fontFamily);
            text.textContent = textItem.str;
            svg.appendChild(text);
        });
        return svg;
    }
});

这是控制台输出： 蓝色是控制台输入，因此可以通过控制台访问 PDFJS。

这是出现引用错误的地方（在 pdf.worker.js 中）：

PDFJS.version = '1.0.233';

这是设置版本号的第一行之一。但是 PDFJS 似乎是未定义的。

这是我的问题：

为什么没有定义？我应该如何解决这个问题？

【问题讨论】：

你在哪里实际加载pdf.worker.js（我可以看到你的define模块声明吗？）
也不知道你为什么使用module.exports。对于前端 AMD 模块，请遵循以下格式：requirejs.org/docs/api.html#deffunc 请记住，前端没有什么是同步的（就加载外部文件而言）。
为什么要使用 module.exports？对于骨干网/木偶中的视图来说，这是相当标准的。这就是根据示例加载 pdf.worker.js 的方式。 PDFJS.workerSrc = "/js/pdf.worker.js";我需要指定一个定义函数吗？我没有完全掌握这个概念以及它如何在这里帮助我。 Tnx:)
你是否使用Require.js来加载模块？

标签： javascript pdf backbone.js marionette pdf.js

【解决方案1】：

我让 pdf 查看器开始工作。而不是使用：

 PDFJS.workerSrc = "/js/pdf.worker.js";

我只是像这样禁用了工人：

 PDFJS.disableWorker = true;

现在它神奇地起作用了。不知道为什么。

【讨论】：