本篇文章為大家展示了怎么在vue中使用pdfjs顯示PDF可復制，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

pdf顯示的方法

方法一

使用embed標記來使用瀏覽器自帶的pdf工具。

這種實現方式優缺點都很明顯：

優點：自帶“打印”，“搜索”，“翻頁”等功能，強大且實現方便。

缺點：不同瀏覽器的pdf工具樣式不一，且無法滿足個性化需求，比如：禁止打印，下載等。

方法二

使用Mozilla的PDF.js，自定義展示PDF。

• 基礎功能集成

• 使用Text-Layers渲染(可實現pdf內容復制)

什么是PDF.JS

PDF.js是基于HTML5技術構建的，用于展示可移植文檔格式的文件(PDF)，它可以在現代瀏覽器中使用且無需安裝任何第三方插件。

安裝：

npm install pdfjs-dist

基礎功能有兩個必須引用的文件：

• pdf.js

• pdf.worker.js

如果使用CDN的方式，直接引用如下對應文件即可：

• https://mozilla.github.io/pdf.js/build/pdf.js

• https://mozilla.github.io/pdf.js/build/pdf.worker.js

如果使用npm的方式，則在需要使用PDF.js的文件中如下引用:

import PDFJS from 'pdfjs-dist';

PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js';

這兩個文件包含了獲取、解析和展示PDF文檔的方法，但是解析和渲染PDF需要較長的時間，可能會阻塞其它JS代碼的運行。

為解決該問題，pdf.js依賴了HTML5引入的Web Workers——通過從主線程中移除大量CPU操作（如解析和渲染）來提升性能。

PDF.js的API都會返回一個Promise，使得我們可以優雅的處理異步操作。

使用

本文章只介紹在vue中的使用, 下面是自己寫的展示pdf的組件可以直接拿去用

注：具體解釋請看下面代碼中的注釋

 .drag-box {
  height: 800px;
 }
 .pdf-box {
  position: relative;
 }
 .el-scrollbar__wrap {
  overflow-x: hidden;
 }

上述內容就是怎么在vue中使用pdfjs顯示PDF可復制，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創新互聯行業資訊頻道。