Question

我一直在使用Meteor和React开展项目，这需要一个能够选择文本的PDF查看器。

我目前正在尝试使用Mozilla的PDF.js来实现这一目标，但我在开始时遇到了一些麻烦。我是一位长期读者，也是stackoverflow的第一次提问者。

我已经用npm安装了PDF.js.

npm install pdfjs-dist --save

现在我尝试修改pdf.js＆＃39; github项目here中的示例，以创建一个React组件，该组件将从提供的文件路径呈现PDF并包含文本层。

进口/ UI /组件/ PDF / PDFText.jsx

import React from 'react';

require ('pdfjs-dist/build/pdf.combined');
require ('pdfjs-dist/web/compatibility');

export default class PDFText extends React.Component {

  renderPDF() {

    PDFJS.workerSrc = '/node_modules/pdfjs-dist/build/pdf.worker.js';

    const container = document.getElementById('pdf-container');
    const scale = 1;
    const pageNumber = 1;

    PDFJS.getDocument(this.props.file).then(function(pdf) {

      return pdf.getPage(pageNumber).then(function(page) {
        var pdfPageView = new PDFJS.PDFPageView({
          container: container,
          id: pageNumber,
          scale: scale,
          defaultViewport: page.getViewport(scale),
          textLayerFactory: new PDFJS.DefaultTextLayerFactory()
        });

        pdfPageView.setPdfPage(page);
        return pdfPageView.draw();
      });
    });
  }

  render() {
    this.renderPDF()
    return (
      <div id='pdf-container'></div>
    );
  }
}

如果我在页面I中包含此组件，则会收到以下错误：

未捕获（承诺）TypeError：PDFJS.DefaultTextLayerFactory不是构造函数

我接下来要做的就是包括＆＃39; pdfjs-dist / web / pdf_viewer＆＃39;在我的代码中，因为这是声明DefaultTextLayerFactory的地方。我修改了上面的代码，在类声明上面添加了以下行：

require ('pdfjs-dist/web/pdf_viewer');

当我现在运行代码时，我得到了一个不同的错误。

未捕获的TypeError：无法读取属性＆＃39; PDFJS＆＃39;未定义的

at Object.<anonymous> (modules.js?hash=9dd20a3…:114918)
at __w_pdfjs_require__ (modules.js?hash=9dd20a3…:114838)
at Object.<anonymous> (modules.js?hash=9dd20a3…:117449)
at __w_pdfjs_require__ (modules.js?hash=9dd20a3…:114838)
at Object.<anonymous> (modules.js?hash=9dd20a3…:118157)
at __w_pdfjs_require__ (modules.js?hash=9dd20a3…:114838)
at module.exports (modules.js?hash=9dd20a3…:114884)
at modules.js?hash=9dd20a3…:114887
at webpackUniversalModuleDefinition (modules.js?hash=9dd20a3…:114811)
at pdf_viewer.js (modules.js?hash=9dd20a3…:114818)

我真的不确定这里发生了什么。我注意到函数抱怨指的是webpack - 我还没有使用过。

我还尝试在我的代码开头包含以下检查（这是从上面github链接中的pageviewer.js获取的）。

if (!PDFJS.PDFViewer || !PDFJS.getDocument) {
  alert('Please build the pdfjs-dist library using\n' +
        '  `gulp dist`');
}

我的代码确实触发了该警报（PDFJS.PDFViewer未定义），但是当我使用npm安装构建的pdfjs-dist库时，该消息看起来并不正确。克隆回购的人似乎也有这样的信息。 pdfjs-dist目录中没有gulp文件 - 这是有道理的。

我确定问题的一部分是我在这里尝试了很多新工具。这是我第一次使用meteor，react，node和pdf.js，如果我犯了一个明显的菜鸟错误，请提前道歉。

为了记录，我尝试了一些其他库，包括：

mikecousins / react-pdf-js（只是简单地显示没有文本图层的pdf）。
peerlibrary / meteor-pdf.js（我在这个问题上也遇到了一些错误，我没有进一步追求它，因为回购在几年内没有被触及）。

希望有足够的信息让某人发现问题。我的理论是，我需要做一些其他的设置步骤才能使这个工作流星或做出反应（这就是为什么它没有显而易见的＆＃34;入门＆＃34;在PDF.js网站上。

另外，我还没有锁定PDF.js，所以如果解决我的问题的最简单方法是使用别的东西，我很乐意尝试。

感谢您的时间

设置PDF.js以使用Meteor + Reactjs项目（想要使用文本图层）

0 个答案: