Question

我有一个使用打字稿在Angular4中编写的网络应用程序，它一直很适合我。我现在尝试改变是使用注释图层，我无法弄清楚如何做到这一点。我已将我的代码更改为像pageviewer示例一样工作。

我导入这样的pdf.js：

import * as PDFJS from 'pdfjs-dist';

我像这样加载文档：

this.loadingTask = PDFJS.getDocument(url);
this.loadingTask.onProgress = progress => this.downloadProgress = (progress.loaded / fileSize) * 80;
this.pdf = await this.loadingTask;

然后我像在pageviewer示例中那样渲染它：

// Get size of current PDF page
const page = await this.pdf.getPage(currentPage);
let viewport = page.getViewport(1);

// Calculate the scale
let scale = 1;
if (zoomWidth) {
    scale = windowWidth / viewport.width;
} else {
    scale = Math.min(windowWidth / viewport.width, windowHeight / viewport.height);
}

// Creating the page view with default parameters.
var pdfPageView = new PDFJS.PDFPageView({
    container: container,
    id: currentPage,
    scale: scale,
    defaultViewport: page.getViewport(scale),
    // We can enable text/annotations layers, if needed
    textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
    annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory()
});
// Associates the actual page with the view, and drawing it
pdfPageView.setPdfPage(page);
return pdfPageView.draw();

当我运行此操作时，我在Chrome控制台中出现了以下错误：

ERROR Error: Uncaught (in promise): TypeError: __WEBPACK_IMPORTED_MODULE_1_pdfjs_dist__.DefaultTextLayerFactory is not a constructor
TypeError: __WEBPACK_IMPORTED_MODULE_1_pdfjs_dist__.DefaultTextLayerFactory is not a constructor

如果我注释掉DefaultTextLayerFactory和DefaultAnnotationLayerFactory，我在PDFPageView上会收到类似的错误。

我做错了什么？

Answer 1

经过对pdf.js文件的大量研究后，我发现了一个适合我的解决方案，如果它可以帮助其他人，我会在这里发布。我换了

import * as PDFJS from 'pdfjs-dist';

使用：

import 'pdfjs-dist/build/pdf';
import 'pdfjs-dist/web/pdf_viewer';
import pdfjsLib from 'pdfjs-dist/webpack';
declare let PDFJS;

现在它适用于我的Angular 4应用程序。

使用Angular4中的PDFJS DefaultTextLayerFactory和DefaultAnnotationLayerFactory

1 个答案: