[英]How to use PDF.js in Angular 2/4/5?
I'm trying to develop PDfViewer Application using Mozilla's PDF.js (example here) .我正在尝试使用 Mozilla 的 PDF.js (example here)开发 PDfViewer 应用程序。 It would be great if there is any github project as a reference.如果有github项目作为参考就好了。
Thanks inadvance!!先谢谢了!!
If it is not a must to use Mozilla's PDF.js then you can use ng2-pdf-viewer npm module which uses PDF.js in background.如果不是必须使用 Mozilla 的 PDF.js,那么您可以使用在后台使用 PDF.js 的 ng2-pdf-viewer npm 模块。 You can start of it with following steps您可以通过以下步骤开始
Install安装
npm install ng2-pdf-viewer --save
Note: For angular 4 or less use version 3.0.8注意:对于 angular 4 或更低版本,请使用 3.0.8 版
Then, import the module in app.module.js然后,在 app.module.js 中导入模块
import { PdfViewerModule } from 'ng2-pdf-viewer';
@NgModule({
imports: [BrowserModule, PdfViewerModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
And then use it in your component然后在你的组件中使用它
@Component({
selector: 'example-app',
template: `
<pdf-viewer [src]="pdfSrc"
[render-text]="true"
style="display: block;">
</pdf-viewer>
})
For more details, refer the below git URL and the demo URL.有关更多详细信息,请参阅下面的 git URL 和演示 URL。
https://github.com/VadimDez/ng2-pdf-viewer https://github.com/VadimDez/ng2-pdf-viewer
https://vadimdez.github.io/ng2-pdf-viewer/ https://vadimdez.github.io/ng2-pdf-viewer/
Hope this helps you.希望这对你有帮助。
PDF.js with typings in Angualr 10 PDF.js 在 Angualr 10 中打字
ng2-pdf-viewer is a great solution. ng2-pdf-viewer是一个很好的解决方案。 I needed to use PDF.js directly as for the requirement to generate thumbnail in a service without creating a component.我需要直接使用 PDF.js,因为需要在服务中生成缩略图而不创建组件。
This works as of Angular 10:这适用于 Angular 10:
npm i pdfjs-dist
npm i @types/pdfjs-dist
Import and Usage.导入和使用。 Note the GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
注意GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
: :
import { getDocument, GlobalWorkerOptions, PDFDocumentProxy, PDFRenderParams, version, ViewportParameters } from 'pdfjs-dist';
export class MyPdfService {
private document: Document;
constructor(@Inject(DOCUMENT) document) {
this.document = document;
const pdfWorkerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${version}/pdf.worker.min.js`;
GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
}
// My use case demonstrating strongly typed usage.
public async pdfToImageDataURLAsync(pdfFile: File): Promise<string> {
const arrayBuffer = await new Response(pdfFile).arrayBuffer();
const canvas = this.document.createElement('canvas'),
ctx = canvas.getContext('2d') as CanvasRenderingContext2D,
data = arrayBuffer;
const pdf: PDFDocumentProxy = await getDocument(data).promise;
const page = await pdf.getPage(1);
const viewPortParams: ViewportParameters = { scale: 2 };
const viewport = page.getViewport(viewPortParams);
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext: PDFRenderParams = {
canvasContext: ctx,
viewport: viewport
};
const renderedPage = await page.render(renderContext).promise;
const res = canvas.toDataURL();
if (pdf != null) pdf.destroy();
return res;
}
}
If the requirement is to use pdfjs directly on angular, here is the relevant code如果要求是直接在angular上使用pdfjs,这里是相关代码
this.http.get(url, { responseType: ResponseContentType.Blob }).map(
(res) => {
return new Blob([res.blob()], { type: fileType });
});
3.Create url using blob and supply to viewer.html 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);
You may have to manually upgrade pdfjs if you follow this steps.如果您按照以下步骤操作,您可能需要手动升级 pdfjs。
If you are looking to use an easier solution without all these manual steps, install https://www.npmjs.com/package/ng2-pdfjs-viewer and follow the instructions.如果您希望在没有所有这些手动步骤的情况下使用更简单的解决方案,请安装https://www.npmjs.com/package/ng2-pdfjs-viewer并按照说明进行操作。
The usage would be as easy as使用方法很简单<ng2-pdfjs-viewer pdfSrc="report.pdf"></ng2-pdfjs-viewer>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.