今天小編給大家分享一下如何在vue中使用pdfjs顯示PDF可復(fù)制的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

目前成都創(chuàng)新互聯(lián)公司已為上1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、鹽山網(wǎng)站維護等服務(wù)，公司將堅持客戶導向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

pdf顯示的方法

方法一

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

這種實現(xiàn)方式優(yōu)缺點都很明顯：

優(yōu)點：自帶“打印”，“搜索”，“翻頁”等功能，強大且實現(xiàn)方便。

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

方法二

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

• 基礎(chǔ)功能集成

• 使用Text-Layers渲染(可實現(xiàn)pdf內(nèi)容復(fù)制)

什么是PDF.JS

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

安裝：

npm install pdfjs-dist

基礎(chǔ)功能有兩個必須引用的文件：

• pdf.js

• 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，使得我們可以優(yōu)雅的處理異步操作。

使用

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

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

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

以上就是“如何在vue中使用pdfjs顯示PDF可復(fù)制”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。