一、pdf.js介紹
官網(wǎng)地址：http://mozilla.github.io/pdf.js/
中文文檔地址：https://gitcode.gitcode.host/docs-cn/pdf.js-docs-cn/print.html
PDF.js是基于HTML5技術(shù)構(gòu)建的，用于展示可移植文檔格式的文件(PDF)，它可以在現(xiàn)代瀏覽器中使用且無需安裝任何第三方插件。
pdf.js主要包含兩個庫文件
pdf.js:負責(zé)API解析
pdf.worker.js:負責(zé)核心解析
二、實現(xiàn)pdf預(yù)覽的兩種方式
1、使用viewer.html
viewer.html主要分為三層：outerContainer層、printContainer層(該層目前為空)、xl-chrome-ext-bar層、fileInput域。
-
從官網(wǎng)下載pdf.js包
下載地址：https://mozilla.github.io/pdf.js/getting_started/#download -
引入pdf.js包
可將pdf.js包 放到服務(wù)器上 如：http://xxxx:8080/static/pdfjs
也可將pdf.js包直接解壓在public文件夾下
pdf.js包的目錄結(jié)構(gòu)
│ ├── pdf.js - 顯示層
│ ├── pdf.js.map - 顯示層source map
│ ├── pdf.worker.js - 核心層
│ └── pdf.worker.js.map - 核心層source map
├── web/
│ ├── cmaps/ - character maps (required by core)
│ ├── compressed.tracemonkey-pldi-09.pdf - PDF文件，用于測試目的
│ ├── debugger.js - 用于debug
│ ├── images/ - 圖標
│ ├── locale/ - 本地化文件
│ ├── viewer.css - 樣式
│ ├── viewer.html - 用于展示的html文件
│ ├── viewer.js - 展示層
│ └── viewer.js.map - 展示層source map
└── LICENSE
- 使用iframe標簽顯示pdf
1)若pdf.js包及pdf文件都在服務(wù)器上部署
<iframe :src="url" width="100%" height="100%" frameborder="0"></iframe>
pdfServerUrl = 'http://xxxx:8080/static/pdfjs/web/viewer.html'
pdfInfoUrl = 'http://xxxx:8080/XXX/getClausePdf?Code=1234'
url = `${pdfServerUrl}?file=${encodeURIComponent(pdfInfoUrl)}` // 調(diào)取接口返回文件流
2)若pdf.js包及pdf文件都在本地
<iframe :src="`/PDF.js/web/viewer.html?file=${pdf}` width="100%" height="100%" frameborder="0"></iframe>
<script>
import pdf from '/images/file/11.pdf'
</script>
注：
此方法可以實現(xiàn)pdf的預(yù)覽、全文搜索、搜索內(nèi)容高亮展示、文本復(fù)制的功能
2、將PDF文件渲染成Canvas
安裝
pnpm i pdfjs-dist // "pdfjs-dist": "^3.5.141"
在vue頁面
<template>
<div id="pdf-container">
<canvas v-for="page in state.pdfPages" :key="page" :id="`pdfCanvas${page}`" style="border-bottom:1px solid #d4d2d2" />
</div>
</template>
import * as PDF from 'pdfjs-dist'
const pdfjsWorker = import('pdfjs-dist/build/pdf.worker.entry')
PDF.GlobalWorkerOptions.workerSrc = pdfjsWorker
import pdf from '/images/file/11.pdf'
const state = reactive<any>({
pdfPath: pdf, // 本地PDF文件路徑放在/public中
pdfPages: '', // 頁數(shù)
pdfWidth: '', // 寬度
pdfSrc: '', // 地址
pdfScale: 1.0, // 放大倍數(shù)
})
let pdfDoc: any = null
onMounted(() => {
loadFile(state.pdfPath)
})
function loadFile(url: string) {
PDF.getDocument(url).promise.then((p: any) => {
pdfDoc = p
const { numPages } = p
state.pdfPages = numPages
nextTick(() => {
renderPage(1) // 從第一頁開始渲染
})
})
}
function renderPage(num: number) {
pdfDoc.getPage(num).then((page: any) => {
const canvas: any = document.getElementById(`pdfCanvas${num}`)
const ctx = canvas.getContext('2d')
const dpr = window.devicePixelRatio || 1
const bsr
= ctx.webkitBackingStorePixelRatio
|| ctx.mozBackingStorePixelRatio
|| ctx.msBackingStorePixelRatio
|| ctx.oBackingStorePixelRatio
|| ctx.backingStorePixelRatio
|| 1
const ratio = dpr / bsr
const viewport = page.getViewport({ scale: state.pdfScale })
canvas.width = viewport.width * ratio
canvas.height = viewport.height * ratio
canvas.style.width = '100%'
canvas.style.height = '100%'
state.pdfWidth = `${viewport.width}px`
ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
// 將 PDF 頁面渲染到 canvas 上下文中
const renderContext = {
canvasContext: ctx,
viewport,
}
page.render(renderContext)
if (state.pdfPages > num)
renderPage(num + 1)
})
}
注：
此代碼只能實現(xiàn)pdf預(yù)覽功能，如果要文本復(fù)制，要使用Text-Layers渲染
使用到的函數(shù)解讀
getDocument()：用于異步獲取PDf文檔，發(fā)送多個Ajax請求以塊的形式下載文檔。它返回一個Promise，該Promise的成功回調(diào)傳遞一個對象，該對象包含PDF文檔的信息，該回調(diào)中的代碼將在完成PDf文檔獲取時執(zhí)行。
getPage()：用于獲取PDF文檔中的各個頁面。
getViewport()：針對提供的展示比例，返回PDf文檔的頁面尺寸。
render()：渲染PDF。
如果要文本復(fù)制，需要將page.render(renderContext)修改為以下代碼：
// 要引入組件
import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer.js'
import 'pdfjs-dist/web/pdf_viewer.css'
page.render(renderContext).then(() => {
return page.getTextContent();
}).then((textContent) => {
// 創(chuàng)建文本圖層div
const textLayerDiv = document.createElement('div');
textLayerDiv.setAttribute('class', 'textLayer');
// 將文本圖層div添加至每頁pdf的div中
pageDiv.appendChild(textLayerDiv);
// 創(chuàng)建新的TextLayerBuilder實例
var textLayer = new TextLayerBuilder({
textLayerDiv: textLayerDiv,
pageIndex: page.pageIndex,
viewport: viewport
});
textLayer.setTextContent(textContent);
textLayer.render();
});
重點函數(shù)解讀：
page.render()：該函數(shù)返回一個當PDF頁面成功渲染到界面上時解析的promise，我們可以使用成功回調(diào)來渲染文本圖層。
page.getTextContent()：該函數(shù)的成功回調(diào)會返回PDF頁面上的文本片段。
TextLayerBuilder：該類的實例有兩個重要的方法。setTextContent()用于設(shè)置page.getTextContent()函數(shù)返回的文本片段；render()用于渲染文本圖層。
三、viewer.js的使用形勢下的一些方法及技巧
1、實現(xiàn)外部操作跳轉(zhuǎn)到具體的某一頁
法1）、修改viewer.js源碼，添加一個可供頁面跳轉(zhuǎn)的參數(shù)page
<iframe :src="`/PDF.js/web/viewer.html?file=${pdf}&page=${pageNum}`` width="100%" height="100%" frameborder="0"></iframe>
<script>
import pdf from '/images/file/11.pdf'
const pageNum = 1
</script>
缺點：每次跳轉(zhuǎn)的時候pdf會重新加載一遍，然后跳到對應(yīng)的位置
法2）、修改pdf.js里面的頁碼
const pdfFrame = document.getElementById('myIframe').contentWindow
pdfFrame.PDFViewerApplication.page = 10 // 傳入需要讓跳轉(zhuǎn)的值
根據(jù)pdf.js內(nèi)置函數(shù)，可直接修改當前頁面，沒有太大的跳動，解決了上面方法的缺點
2、獲取pdf.js里面的頁碼
pdf.js內(nèi)置的page屬性把動態(tài)的當前頁碼導(dǎo)出
onMounted(() => {
interval.value = setInterval(checkPdf, 300)
})
const checkPdf = () => {
const pdfFrame = document.getElementById('myIframe').contentWindow
currentPage.value = pdfFrame.PDFViewerApplication.page
}
注：
3、根據(jù)pdf.js內(nèi)置的postMessage函數(shù)、findBar函數(shù)實現(xiàn)外部文本的搜索
<a-button @click="getTextHighLight">
點擊獲取文本位置
</a-button>
const getTextHighLight= () => {
const iframe = document.getElementById('myIframe')
iframe.contentWindow.postMessage('經(jīng)依法審查查明：', '*')
iframe.contentWindow.addEventListener('message', (e) => {
iframe.contentWindow.PDFViewerApplication.findBar.findField.value = e.data
iframe.contentWindow.PDFViewerApplication.findBar.highlightAll.checked = true iframe.contentWindow.PDFViewerApplication.findBar.dispatchEvent('highlightallchange')
}, false)
iframe.contentWindow.PDFViewerApplication.pagesCount)
}
4、在pdfjs-3.7.107-dist版本中，給pdf.js傳參的處理
①在全局同樣的位置添加三個參數(shù)：pageRangeStart, pageRangeEnd, this.isPageRange，在class PDFFindController中增加
在其它地方要獲取到pageRangeStart， pageRangeEnd的值
②、在setInitialView是從外部iframe中獲取參數(shù)
var c_url=window.location.href;
if(c_url.indexOf("&")&&c_url.indexOf("=")){
var c_urlArray={}
var c_val=c_url.split('?')[1];
var c_valArray=c_val.split('&');
for(let i=0;i<c_valArray.length;i++){
let c_key=c_valArray[i].split('=')[0];
let c_value=c_valArray[i].split('=')[1];
c_urlArray[c_key]=c_value;
}
if(c_urlArray['pageRangeStart']){
this.pageRangeStart = Number(c_urlArray['pageRangeStart'])
PDFViewerApplication.findController.pageRangeStart = this.pageRangeStart
}
if(c_urlArray['pageRangeEnd']){
this.pageRangeEnd = Number(c_urlArray['pageRangeEnd'])
PDFViewerApplication.findController.pageRangeEnd = this.pageRangeEnd
}
if(this.pageRangeStart!==0 && this.pageRangeEnd!==0){
PDFViewerApplication.findController.isPageRange = true
}
}
關(guān)于頁碼索引的幾個值
_offset：{
matchIdx: null
pageIdx: 29
wrapped: false
}
_resumePageIdx: null ,基本都是null
_selected: {
matchIdx: -1
pageIdx: -1
}
_pageMatches : 頁面所有匹配搜索的內(nèi)容，是個數(shù)組
this._linkService：{
page: 50
pagesCount: 66
rotation: 0
}
_linkService 的page控制頁碼顯示 影響 _offset
【currentPage.value = pdfFrame.PDFViewerApplication.page】
5、在pdfjs-3.7.107-dist版本中，修改convertToRegExpString方法，更換匹配方法（可匹配到帶有空格的文檔）
原碼
#convertToRegExpString(query, hasDiacritics) {
const {
matchDiacritics
} = this.#state;
let isUnicode = false;
query = query.replaceAll(SPECIAL_CHARS_REG_EXP, (match, p1, p2, p3, p4, p5) => {
if (p1) {
return `[ ]*\\${p1}[ ]*`;
}
if (p2) {
return `[ ]*${p2}[ ]*`;
}
if (p3) {
return "[ ]+";
}
if (matchDiacritics) {
return p4 || p5;
}
if (p4) {
return DIACRITICS_EXCEPTION.has(p4.charCodeAt(0)) ? p4 : "";
}
if (hasDiacritics) {
isUnicode = true;
return `${p5}\\p{M}*`;
}
return p5;
});
const trailingSpaces = "[ ]*";
if (query.endsWith(trailingSpaces)) {
query = query.slice(0, query.length - trailingSpaces.length);
}
if (matchDiacritics) {
if (hasDiacritics) {
DIACRITICS_EXCEPTION_STR ||= String.fromCharCode(...DIACRITICS_EXCEPTION);
isUnicode = true;
query = `${query}(?=[${DIACRITICS_EXCEPTION_STR}]|[^\\p{M}]|$)`;
}
}
return [isUnicode, query];
}
修改后：
#convertToRegExpStringWL(query, hasDiacritics) {
const {
matchDiacritics
} = this.#state;
let isUnicode = false;
// const SPECIAL_CHARS_REG_EXP = /([.*+?^${}()|[\]\\])|(\p{P})|(\s+)|(\p{M})|(\p{L})/gu;
const SPECIAL_CHARS_REG_EXP_wl = /([.*+?^${}()|[\]\\])|(\p{P})|(\s+)|(\p{M})|(\p{L})/gu;
// 匹配文本中的特殊字符、標點符號、空格、語言符號和字母的。
// [.*+?^${}()|[\]\\]匹配特殊字符 其中，.表示匹配任意字符，*表示匹配前面的字符0次或多次，+表示匹配前面的字符1次或多次，?表示匹配前面的字符0次或1次，^表示匹配字符串的開頭，$表示匹配字符串的結(jié)尾，{和}表示匹配前面的字符指定的次數(shù)，()表示分組，|表示或，[和]表示字符集，\表示轉(zhuǎn)義字符。
//其中，\p{P}表示標點符號，\s表示空格，\p{M}表示語言符號，\p{L}表示字母。
query = query.replaceAll(SPECIAL_CHARS_REG_EXP_wl,(match, p1, p2, p3, p4, p5)=>{
// return `${match}\\s*`
if (p1) {
return `[ ]*\\${p1}[ ]*`;
}
if (p2) {
return `[ ]*${p2}[ ]*`;
}
if (p3) {
return "[ ]+";
}
if (matchDiacritics) {
return p4 || p5;
}
if (p4) {
return DIACRITICS_EXCEPTION.has(p4.charCodeAt(0)) ? p4 : "";
}
if (hasDiacritics) {
isUnicode = true;
return `${p5}\\p{M}*`;
}
return `${match}\\s*`;
})
const trailingSpaces = "[ ]*";
if (query.endsWith(trailingSpaces)) {
query = query.slice(0, query.length - trailingSpaces.length);
}
if (matchDiacritics) {
if (hasDiacritics) {
DIACRITICS_EXCEPTION_STR ||= String.fromCharCode(...DIACRITICS_EXCEPTION);
isUnicode = true;
query = `${query}(?=[${DIACRITICS_EXCEPTION_STR}]|[^\\p{M}]|$)`;
}
}
return [isUnicode, query];
}
6、清除pdf緩存
問題描述
為什么說清除pdf緩存呢？例如 我打開一個pdf文件，滑到第6頁，然后退出這個頁面，再進來還是在第6頁。那有沒有方法可以讓文件從第1頁開始加載呢。就開始了我的探索之路，其實開發(fā)經(jīng)驗豐富的人，找問題很快也很準，也許是因為開發(fā)的需求多了，接觸的問題也多了。我先去在插件里面去找，在viewer.js里面找。緩存就是意味著歷史記錄，于是我先查history，我發(fā)現(xiàn)了有這樣一行代碼：
localStorage.setItem('pdfjs.history', databaseStr);
在viewer.js中的把這行注釋掉
7、pdf.js實現(xiàn)分片加載
當 pdf 文件比較大， 往往會加載比較慢，影響用戶體驗。
如果 一個pdf 文件大小為：100M，如何快速的在瀏覽器打開
前置條件
第一：web服務(wù)器必須要能支持，分片下載。nginx 1.09 版本已上默認的就支持了
第二：瀏覽器支持，經(jīng)過簡單測試，谷歌和火狐都支持，谷歌支持的最好.火狐的分片邏輯貌似有問題，還在觀察。
:如何設(shè)置分片大小
經(jīng)過研究代碼，調(diào)用方式如下
PDFJS.getDocument({url:url,rangeChunkSize:65536*16}).then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
// Initial/first page rendering
renderPage(pageNum);
})
注意：
這里我們只是測試所以在請求頭里加了range參數(shù)，實際在項目中當我們使用PdfJS時，是不需要手動添加range參數(shù)，PdfJS會根據(jù)需要自動計算range值傳給后臺，如果我們手動添加range請求頭參數(shù)，我們會發(fā)現(xiàn)下載的數(shù)據(jù)是損壞的，這是因為，PdfJS分片加載文件流時，會先發(fā)送一個200的請求用以獲取文件的元數(shù)據(jù)和目錄等信息，然后再發(fā)送206請求獲取分片再去元數(shù)據(jù)和目錄中查找對應(yīng)的分片信息，所以能正常顯示文件內(nèi)容，而如果我們直接指定請求字節(jié)范圍，請求就不會去發(fā)送200請求獲取Pdf文件的元數(shù)據(jù)和目錄等先驅(qū)數(shù)據(jù)，這時雖然正常獲取了分片數(shù)據(jù)流，但是瀏覽器無法解析就會報文件格式損壞的錯誤
分片下載，并不是把下載速度減少了，其實時間反而更長了。但就像播放視頻一樣，他很快將pdf 前面內(nèi)容顯示出來，后面的下載，用戶是無感知的。總體來說體驗提升了。
使用分片 ，100m的pdf ,2秒內(nèi)就可以看到內(nèi)容。
不使用分片，需要等9秒以上的時間，才能看到。
8、如果后端返回的是流的形式，就用此方法轉(zhuǎn)一下
<iframe id="myIframe" width="100%" height="100%" :src="`${serverUrl}?file=${pdfUrl}`" frameborder="0" />
pdfFile('44.pdf').then((res) => {
pdfUrl.value = getObjectURL(res)
})
/**
* 流轉(zhuǎn)成url
*/
getObjectURL(file) {
let url = null
if (window.createObjectURL !== undefined) { // basic
url = window.createObjectURL(file)
} else if (window.webkitURL !== undefined) { // webkit or chrome
try {
url = window.webkitURL.createObjectURL(file)
} catch (error) {
console.log(error)
}
} else if (window.URL !== undefined) { // mozilla(firefox)
try {
url = window.URL.createObjectURL(file)
} catch (error) {
console.log(error)
}
}
return url
},
此方法可以將接口返回的流的形式轉(zhuǎn)成，可用的本地的pdf文件的鏈接地址
9、 下載
fileDownload() {
if (this.src) {
var tempLink = document.createElement('a')
tempLink.style.display = 'none'
tempLink.href = this.PDF // 解析好的地址
tempLink.setAttribute('download', this.fileName)
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
document.body.appendChild(tempLink)
tempLink.click()
document.body.removeChild(tempLink)
window.URL.revokeObjectURL(this.PDF)
} else {
this.$message.error('請選擇需要導(dǎo)出的算法')
}
},
四、原理
首先底圖是一個Canvas，內(nèi)容和PDF一樣（通過下面介紹的 page.render 方法可以得到），底圖之上是一個textLayer，這一層就是通過 page.getTextContent() 得到了字體的位置和樣式，再覆蓋在 Canvas 上。
//Add this piece of code to webViewerInitialized function in viewer.js
if ('search' in params) {
searchPDF(params['search']);
}
//New function in viewer.js
function searchPDF(td_text) {
PDFViewerApplication.findBar.open();
PDFViewerApplication.findBar.findField.value = td_text;
PDFViewerApplication.findBar.caseSensitive.checked = true;
PDFViewerApplication.findBar.highlightAll.checked = true;
PDFViewerApplication.findBar.findNextButton.click();
PDFViewerApplication.findBar.close();
}
#extractText()方法：
這個方法的功能為將pdf文件的所有文本提取出來，按頁保存在PDFFindController._pageContents[]中；這個方法提取出來的文本會用于之后的查找。
#nextMatch()方法
_nextMatch() {
const previous = this._state.findPrevious; // findPrevious是點擊尋找區(qū)的按鈕發(fā)布的事件的參數(shù)，只有點擊左右箭頭時才有這個參數(shù)，分別是true和false
const currentPageIndex = this._linkService.page - 1; // 當前查找所在頁碼-1
const numPages = this._linkService.pagesCount; // pdf頁數(shù)
this._highlightMatches = true;
if (this._dirtyMatch) { // this._dirtyMatch應(yīng)該是不區(qū)分大小寫查找 這下面設(shè)置的都是this._reset()方法中定義的變量
this._dirtyMatch = false;
this._selected.pageIdx = this._selected.matchIdx = -1; // this._selected并無實際含義
this._offset.pageIdx = currentPageIndex; // this._offset并無實際含義
this._offset.matchIdx = null;
this._offset.wrapped = false;
this._resumePageIdx = null;
this._pageMatches.length = 0;
this._pageMatchesLength.length = 0;
this._matchesCountTotal = 0;
this._updateAllPages(); // 發(fā)布名為updatetextlayermatches的事件，與_onUpdateTextLayerMatches綁定，其調(diào)用 _updateMatches()函數(shù)，位于11521行
for (let i = 0; i < numPages; i++) { // _pendingFindMatches這個變量只在這個循環(huán)內(nèi)被調(diào)用，別處沒有調(diào)用
if (this._pendingFindMatches[i] === true) {
continue;
}
this._pendingFindMatches[i] = true;
this._extractTextPromises[i].then(pageIdx => { // 相當于將padeIdx傳入箭頭右邊花括號內(nèi)的函數(shù)中 _extractTextPromises內(nèi)的元素都是Promise類實例
delete this._pendingFindMatches[pageIdx]; // 這里傳入的參數(shù)pageIdx為_extractTextPromises[i]異步操作的結(jié)果
this._calculateMatch(pageIdx);
});
}
}
注：整理了實際開發(fā)過程中遇到并解決的問題
五、pdf.js歷史版本的下載
我使用的pdf.js版本：pdfjs-3.7.107-dist
2.5.207是主流版本，因為該版本對IE的兼容性很好，不少文章都提到過該版本下能完美兼容IE
pdfjs es5版本 （pdfjs-2.5.207-es5-dist）【請看準一定要包括es5版本的哦，按照上述使用方法，即可完美兼容各大瀏覽器】
2.4.456 版本開始就不支持舊版本的瀏覽器了，只支持谷歌76+ 和蘋果瀏覽器13+，還是要好好看文檔
當前項目pdf的版本是 “pdfjs-dist”: “2.13.216”
另外兩個項目的pdf版本 “pdfjs-dist”: “2.0.943”
只有"pdfjs-dist": "2.13.216"這個版本會掛了，涼涼， “pdfjs-dist”: "2.0.943"這個版本是2018年10月份發(fā)布的，這個版本沒有問題，文章來源：http://www.zghlxwxcb.cn/news/detail-645899.html
下載方式
https://github.com/mozilla/pdf.js/releases/tag/v2.5.207
文章來源地址http://www.zghlxwxcb.cn/news/detail-645899.html
到了這里，關(guān)于vue3項目使用pdf.js插件實現(xiàn)：搜索高亮、修改pdf.js顯示的頁碼、向pdf.js傳值、控制搜索、處理接口文件流的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
