angular项目中显示word, pdf, 文档的插件

本文介绍了在Angular项目中如何使用ngx-extended-pdf-viewer插件实现在前端直接上传并显示PDF文档,以及使用ngx-doc-viewer处理Word文档,包括文件读取和Mammoth库的配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在做各种文档的显示,再次简单记录下:

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"]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值