之前用過一個pdf預覽的lib，并且還支持在線編輯，和直接下載編輯之后的pdf和直接打印，還不錯，記錄下

PdfShowcase

首先安裝依賴

npm install ngx-extended-pdf-viewer

然后引入?

import { NgxExtendedPdfViewerModule } from "ngx-extended-pdf-viewer";
imports: [NgxExtendedPdfViewerModule,],

然后就可以在html中使用了，我是因為項目需求關閉了某些功能，具體哪些功能怎么用就不一一介紹了，看官方文檔就行了。?

<ngx-extended-pdf-viewer[height]="'auto'"[textLayer]="true"[zoom]="zoom"[showSidebarButton]="true"[showFindButton]="true"[showPagingButtons]="false"[showDrawEditor]="true"[showStampEditor]="false"[showTextEditor]="true"[showZoomButtons]="false"[showPresentationModeButton]="false"[showOpenFileButton]="false"[showPrintButton]="false"[showDownloadButton]="true"[showSecondaryToolbarButton]="false"[showRotateCwButton]="false"[showRotateCcwButton]="false"[showHandToolButton]="false"[showScrollingButton]="false"[showSpreadButton]="false"[showPropertiesButton]="false"[src]="file"></ngx-extended-pdf-viewer>

這邊是我的service，直接去后端獲取源文件，然后賦值給[src]就行了?

  getFile(request:any): Observable<any> {return this.http.post(this.getTranslateCVFileUrl,request,{ responseType: 'blob' });}

但是似乎我是用的版本有個bug,就是他第一次展示的時候會顯示不出來，縮小一下就行了，所以我這邊手動修改了下zoom

      this.xxxxService.getFile(id).subscribe((res) => {this.zoom = "90%";this.orgin_file = res;this.file = this.orgin_file;timer(500).subscribe(() => {this.zoom = "100%";});});

?我的后端是python，你們看具體后端是什么修改一下自己的代碼。我這邊suppor了如果是docx就轉換成pdf再返回，如果是pdf就直接把path傳到send_file里面，as_attachment如果是需要瀏覽器彈出下載就True，否則就False

from flask import Response, current_app, send_file  
def get_cv_file(self,filename,ext,as_attch)->Response:app=current_app._get_current_object()root_path=app.config['ROOT_PATH']full_path=os.path.join(root_path, os.path.join(self.upload_path, filename+ext))if not os.path.isfile(full_path):raise FileNotFoundError(ErrorMassage.FILE_NOT_FOUND+full_path)if ext.lower() == FILE_EXT.DOCX:if not as_attch:pdf_path=self._cover_doc_docx_2_pdf(filename,ext,root_path)response=send_file(pdf_path, as_attachment=as_attch)else:response=send_file(full_path, as_attachment=as_attch)elif ext.lower() == FILE_EXT.PDF:response=send_file(full_path, as_attachment=as_attch)return response

?

如果部署nginx遇到了這個問題，可以看我這篇blog：

使用ngx-extended-pdf-viewer 20.0.0報錯pdf-4.1.889.min.mjs:1 Failed to load module script_pdf.mjs:報錯-CSDN博客

還有個需要注意的問題就是，他一個頁面只能繪制一個ngx-extended-pdf-viewer 組件，我還沒探究怎么繪制多個這個組件，動態顯示就直接替換src就可以了。