2017-11-10 13 views
0

私はtypescriptを使用してAngular4で書かれたWebアプリケーションを持っています。私は今、注釈レイヤーを使用することを変更しようとしています。その注釈レイヤーを使用する方法はわかりません。私はページビューアの例のように動作するように自分のコードを変更しました。Angular4のPDFJS DefaultTextLayerFactoryとDefaultAnnotationLayerFactoryを使用してください

私はこのような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でも同様のエラーが発生します。

私は間違っていますか?

+0

解決済みですか?もしそうなら、あなたの実用的な解決策を掲載してください – zeusmos

答えて

0

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; 

今では私の角4アプリで動作します。

関連する問題