Angular 6输入文件，如何显示pdf文件的预览[重复]

Question

这个问题在这里已有答案：

• Recommended way to embed PDF in HTML? 19个答案

我有简单的应用程序，我输入，我可以上传PDF文件和

<input (change)="upload($event)"
       multiple
       type="file"/>

<object [data]="file" type="application/pdf">
    <embed [src]="file" type="application/pdf" />
</object>

在上传功能：

upload(event) {
this.file = event.target.files[0];
}

如何显示该文件的预览？

Answer 1

component.html

<input (change)="upload($event)" multiple type="file" />

<object [data]="file" type="application/pdf">
        <embed [src]="file" type="application/pdf" />
    </object>
<pdf-viewer [src]="pdfSrc" [render-text]="true" style="display: block;"></pdf-viewer> 

Component.ts

export class MyComponent {
  pdfSrc: string = '/pdf-test.pdf';
  upload(event) {
    this.file = event.target.files[0];
  }
}

app.module.ts

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

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

您可以使用ng2-pdf-viewer。使用npm i --save ng2-pdf-viewer安装