web-dev-qa-db-ja.com

Angular 2/4/5でPDF.jsを使用する方法は？

MozillaのPDF.jsを使用してPDfViewerアプリケーションを開発しようとしています （ここの例） 。参照としてgithubプロジェクトがあれば素晴らしいと思います。

前もって感謝します！！

javascriptangulartypescriptmozillapdfjs
4
Ravi Kumar B

MozillaのPDF.jsを使用する必要がない場合は、バックグラウンドでPDF.jsを使用するng2-pdf-viewernpmモジュールを使用できます。次の手順で開始できます

インストール

npm install ng2-pdf-viewer --save

注：angular 4以下の場合はバージョン3.0.8を使用してください

次に、モジュールをapp.module.jsにインポートします

import { PdfViewerModule } from 'ng2-pdf-viewer';

@NgModule({
  imports: [BrowserModule, PdfViewerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

そして、それをコンポーネントで使用します

@Component({
  selector: 'example-app',
  template: `
  <pdf-viewer [src]="pdfSrc" 
              [render-text]="true"
              style="display: block;">
  </pdf-viewer>
})

詳細については、以下のgitURLとデモURLを参照してください。

https://github.com/VadimDez/ng2-pdf-viewer

https://vadimdez.github.io/ng2-pdf-viewer/

これがお役に立てば幸いです。

4
Suvethan Nantha

要件がAngularで直接pdfjsを使用することである場合、関連するコードは次のとおりです

  1. アプリケーションのアセットフォルダーの下にある https://github.com/mozilla/pdfjs-dist から「web」フォルダーと「build」フォルダーをコピーします。
  2. `Blob（）オブジェクトを取得/作成します
this.http.get(url, { responseType: ResponseContentType.Blob }).map(
(res) => {
  return new Blob([res.blob()], { type: fileType });
});

3.blobを使用してURLを作成し、viewer.htmlに提供します

// myBlob object is created over http call response. See item 2.
const fileUrl = URL.createObjectURL(myBlobObject);
let myFileName = "sample";
var viewerUrl = `assets/pdfjs/web/viewer.html?file=${encodeURIComponent(fileUrl)}&fileName=${sample}.pdf`;
window.open(viewerUrl);

この手順に従う場合は、pdfjsを手動でアップグレードする必要がある場合があります。

これらすべての手動手順なしでより簡単なソリューションを使用したい場合は、 https://www.npmjs.com/package/ng2-pdfjs-viewer をインストールし、指示に従ってください。

使い方は簡単です
<ng2-pdfjs-viewer pdfSrc="report.pdf"></ng2-pdfjs-viewer>

0
int-i