我一直在使用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,如果我犯了一个明显的菜鸟错误,请提前道歉。
为了记录,我尝试了一些其他库,包括:
希望有足够的信息让某人发现问题。我的理论是,我需要做一些其他的设置步骤才能使这个工作流星或做出反应(这就是为什么它没有显而易见的&#34;入门& #34;在PDF.js网站上。
另外,我还没有锁定PDF.js,所以如果解决我的问题的最简单方法是使用别的东西,我很乐意尝试。
感谢您的时间