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

时间:2017-02-19 00:54:34

标签: reactjs meteor pdf.js

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

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

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

npm install pdfjs-dist --save

现在我尝试修改pdf.js' 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,所以如果解决我的问题的最简单方法是使用别的东西,我很乐意尝试。

感谢您的时间

0 个答案:

没有答案