Question

我有一个简单的应用程序，可以在其中输入可以上传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

安装

Angular 6输入文件，如何显示pdf文件预览

1 个答案: