typescript Angular 6 输入文件，如何显示 pdf 文件的预览
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52269555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 6 input file, how to display preview of pdf file
提问by Adam Adamski
I have simple app where I have input where I can upload pdf file and
我有一个简单的应用程序，我可以在其中输入可以上传 pdf 文件和
<input (change)="upload($event)"
multiple
type="file"/>
<object [data]="file" type="application/pdf">
<embed [src]="file" type="application/pdf" />
</object>
in upload function:
在上传功能中：
upload(event) {
this.file = event.target.files[0];
}
How can I display preview of that file?
如何显示该文件的预览？
回答by Vaibhav Kumar Goyal
component.html
组件.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
组件.ts
export class MyComponent {
pdfSrc: string = '/pdf-test.pdf';
upload(event) {
this.file = event.target.files[0];
}
}
app.module.ts
app.module.ts
import { PdfViewerModule } from 'ng2-pdf-viewer';
.....
@NgModule({
imports: [BrowserModule, PdfViewerModule]
})
You can use the ng2-pdf-viewerfor the same. Install this using npm i --save ng2-pdf-viewer
您可以使用ng2-pdf-viewer进行相同的操作。安装这个使用npm i --save ng2-pdf-viewer
