最近在做各种文档的显示,再次简单记录下:
1. 对于显示pdf经过测试,可以前端直接上传文档不需要url或者使用url都可以的插件最好用的是ngx-extended-pdf-viewer。
<ngx-extended-pdf-viewer
[base64Src]="pdfFileB64"
[useBrowserLocale]="true"
[handTool]="false"
[showHandToolButton]="true"
></ngx-extended-pdf-viewer>
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
let path = event.target == null ? '' : event.target.result;
this.pdfFilePath = path as string;
this.pdfFileB64 = this.pdfFilePath.split(',')[1];
}
或者直接传入pdf所在文件的url地址
<ngx-extended-pdf-viewer
[src]="pdfFileUrl"
[useBrowserLocale]="true"
></ngx-extended-pdf-viewer>
2. 对于显示word,使用的是ngx-doc-viewer
<ngx-doc-viewer
*ngIf="docSrc"
[url]="docSrc"
viewer="mammoth"
style="background-color: white; padding: 1rem"
></ngx-doc-viewer>
const reader = new FileReader();
reader.readAsDataURL(this.file);
reader.onload = (_event) => {
this.el.nativeElement.querySelector('.textarea-holder').style.display =
'none';
this.el.nativeElement.querySelector('#content-area').style.display =
'none';
this.docSrc = reader.result;
}
同时在angular.json中配置assets, scripts
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "node_modules/ngx-extended-pdf-viewer/assets/",
"output": "/assets/"
}
],
"scripts": ["node_modules/mammoth/mammoth.browser.min.js"]