Question

我有一个要求，用户可以上传pdf，我们必须将它们转换为UI中的图像。我们正在使用angular2。我见过pdf.js给图像功能提供了pdf。但是我如何使用角度2？是否可以整合两者？有人可以帮我弄这个吗？

Answer 1

选项1

此软件包将帮助您将pdfjs集成到angular 2+应用程序中：ng2-pdf-viewer。它具有高度可定制性，并且具有很多属性。

可以像这样使用：

npm ERR! Error
npm ERR!     at destStatted (C:\Program Files\nodejs\node_modules\npm\lib\install\action\finalize.js:29:7)
npm ERR!     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
npm ERR!     at FSReqWrap.oncomplete (fs.js:114:15)
npm ERR!
npm ERR! Error: EPERM: operation not permitted, rename 'C:\wamp64\www\blog\node_modules\.staging\abbrev-330971f9' -> 'C:\wamp64\www\blog\node_modules\abbrev'
npm ERR!  Error
npm ERR!     at destStatted (C:\Program Files\nodejs\node_modules\npm\lib\install\action\finalize.js:29:7)
npm ERR!     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
npm ERR!     at FSReqWrap.oncomplete (fs.js:114:15)
npm ERR!
npm ERR! Error: EPERM: operation not permitted, rename 'C:\wamp64\www\blog\node_modules\.staging\abbrev-330971f9' -> 'C:\wamp64\www\blog\node_modules\abbrev'
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\gherr_000\AppData\Roaming\npm-cache\_logs\2018-03-16T22_35_31_584Z-debug.log

安装和配置说明可在此处找到： https://github.com/VadimDez/ng2-pdf-viewer

选项2。

完全披露，作为与@BlackEagle讨论这个帖子的结果（非常感谢他的想法），我创建了一个angular2 +库，它与来自firefox的查看器一起包装pdfjs。它比上面列出的包更不可配置;但如果你想要的只是显示pdf内联或新标签，并利用内置的firefox pdf查看器，这里是ng2-pdfjs-viewer

用法就是这样。

 import { Component } from '@angular/core';
 @Component({
  selector: 'example-app',
  template: `
  <div>
      <label>PDF src</label>
      <input type="text" placeholder="PDF src" [(ngModel)]="pdfSrc">
  </div>
  <pdf-viewer [src]="pdfSrc" 
              [render-text]="true"
              style="display: block;"
  ></pdf-viewer>
  `
})
export class AppComponent {
  pdfSrc: string = '/pdf-test.pdf';
}

Answer 2

是的，您可以按以下方式在angular 2应用程序中使用pdf js

第1步：安装ng2-pdfjs-viewer npm软件包（https://www.npmjs.com/package/ng2-pdfjs-viewer）。在angular2应用程序的package json文件中添加依赖项

  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
----------
-------------
"ng2-pdfjs-viewer": "3.2.5",
}

第2步：在app.module.ts中导入并添加模块

import { PdfJsViewerModule } from 'ng2-pdfjs-viewer';
@NgModule({imports: [PdfJsViewerModule] });

第3步：现在将PdfJsViewerComponent导入app.component.ts

import { PdfJsViewerComponent } from 'ng2-pdfjs-viewer';

并按如下所示从UI编写文件上传代码：

-为pdf src文件路径定义变量

pdfSrc:string='/abc.pdf';

@ViewChild('pdfViewer') pdfViewer:PdfJsViewerComponent;
///this is click method 
onFileSelected() {
    let $img: any = document.querySelector('#file');
    if (typeof (FileReader) !== 'undefined') {
      let reader = new FileReader();
      reader.onload = (e: any) => {
        this.pdfSrc = e.target.result;
        this.pdfViewer.pdfSrc=new Blob([new Uint8Array(e.target.result)]);
        this.pdfViewer.refresh();
      };
      reader.readAsArrayBuffer($img.files[0]);
    }
  }

步骤4：如下更改app.component.html文件

<ng2-pdfjs-viewer #pdfViewer [pdfSrc]="pdfSrc"></ng2-pdfjs-viewer>

注意：

abc.pdf文件应位于应用程序目录中。
从“。\ node_modules \ ng2-pdfjs-viewer”路径复制pdfJs文件夹，然后将此文件夹粘贴到“ src / assets”文件夹中。

希望它能正常工作！

我可以使用带有angular2的pdf.js吗？

2 个答案: