vue中pdf.js的使用之pdf顯示、跳轉(zhuǎn)指定頁(yè)面及高亮關(guān)鍵詞
一、下載pdf.js
https://github.com/mozilla/pdf.js

里面有很多的版本, 高版本的可能瀏覽器不兼容或者還要考慮手機(jī)上面的,最好下載低版本的,這里是v2.16.105-dist版本
二、引入到本地的項(xiàng)目中
在本地static里面創(chuàng)建文件夾pdfjs,然后將下載包里面的文件放進(jìn)pdfjs。
pdf.js包的目錄結(jié)構(gòu)

三、實(shí)現(xiàn)預(yù)覽pdf
1、本地的PDF文件,直接在瀏覽器地址欄輸入打開(kāi)
利用 web里面的viewer.html就可以直接打開(kāi)pdf,里面有默認(rèn)的一個(gè)pdf文檔。
直接在瀏覽器地址欄打開(kāi)pdf: 開(kāi)發(fā)地址 + 存放viewer.html文件夾地址
比如按照以上步驟方法為 http://192.168.0.109:8081/static/pdfjs/web/viewer.html
只要能打開(kāi)沒(méi)有報(bào)錯(cuò)就沒(méi)有什么問(wèn)題

2、實(shí)現(xiàn)自己的pdf預(yù)覽包括后端返回的pdf地址, 這里是創(chuàng)建組件利用iframe顯示pdf文件
<template>
<div>
<iframe id="myIframe" :src="iframeSrc" width="100%" height="100%"></iframe>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
iframeSrc: "../../../static/pdfjs/web/viewer.html",
};
},
}只需要在上面的連接上加上一個(gè)?file=your-pdf-url就行了:(這里是組件注意viewer.html存放的位置)
比如:我的顯示地址是:
this.iframeSrc='../../../static/pdfjs/web/viewer.html?file='+pdfUrl
解決報(bào)錯(cuò):
出現(xiàn)這個(gè)錯(cuò)誤就是跨域的問(wèn)題,找到pdfjs/web/viewer.js文件,注銷(xiāo)跨域代碼就可以
// if (fileOrigin !== viewerOrigin) {
// throw new Error("file origin does not match viewer's");
// }


四、跳轉(zhuǎn)到指定頁(yè)面
根據(jù)pdf.js內(nèi)置函數(shù),可直接修改當(dāng)前頁(yè)面,沒(méi)有太大的跳動(dòng),利用Iframe.
最好在pdf或iframe加載完成之后跳轉(zhuǎn)頁(yè)面
方法一:
const pdfFrame = document.getElementById('myIframe').contentWindow pdfFrame.PDFViewerApplication.page = 10
方法二:
可以直接在地址欄上最后拼接參數(shù)#page=6
iframeSrc: "../../../static/pdfjs2.16.105/web/viewer.html?#page=6",
五、利用pdf里面的find查找關(guān)鍵詞并可以監(jiān)聽(tīng)updatefindcontrolstate統(tǒng)計(jì)個(gè)數(shù)
search() {
const _iframe = document.getElementById('myIframe').contentWindow
_iframe.PDFViewerApplication.eventBus.dispatch("find", {
source: "",
type: "",
query: "政府組織",
phraseSearch: "",
caseSensitive: false,
entireWord: false,
highlightAll: true, //是否所有高亮
findPrevious: true,
matchDiacritics: true
},);
// 利用updatefindcontrolstate統(tǒng)計(jì)每頁(yè)搜索條數(shù)
_iframe.PDFViewerApplication.eventBus.on('updatefindcontrolstate', (e) => {
console.log(e)
console.log(e.source._pageMatches);//這里面是一個(gè)數(shù)組,
})
},六、修改頁(yè)面大小為實(shí)際大小
修改viewer.js頁(yè)面的代碼
const DEFAULT_SCALE_VALUE = "auto" // 修改成 const DEFAULT_SCALE_VALUE = "page-actual" //實(shí)際大小
修改viewer.html頁(yè)面的代碼
找到id="scaleSelectContainer" 下面的id="pageActualOption",如果有selected,就修改成selected="selected",沒(méi)有就不改。
七、每次加載pdf都是在第一頁(yè)
修改viewer.js頁(yè)面的代碼
找到 setInitialView函數(shù) 在里面添加一句代碼:
this.pdfViewer.currentPageNumber=1;
八、修改pdf滾動(dòng)方式為橫向
修改viewer.html頁(yè)面的代碼
找到id="scrollModeButtons" 下面的id="scrollWrapped", 在這個(gè)button上面的class上面添加一個(gè)toggled 同時(shí)修改 aria-checked="true"
修改viewer.js頁(yè)面的代碼
this._scrollMode = _ui_utils.ScrollMode.VERTICAL;
修改成
this._scrollMode = _ui_utils.ScrollMode.WRAPPED;
九、清除pdf緩存
修改viewer.js頁(yè)面的代碼
async _writeToStorage() {
const databaseStr = JSON.stringify(this.database);
// 清除pdf緩存 注銷(xiāo)這句代碼
// localStorage.setItem("pdfjs.history", databaseStr);
}
// 不起作用就在注釋這句代碼,
async _writeToStorage(prefObj) {
// localStorage.setItem("pdfjs.preferences", JSON.stringify(prefObj));
}十、pdf.js實(shí)現(xiàn)分片加載
分片加載就是pdf先將前面內(nèi)容顯示出來(lái),后面的在下載,用戶(hù)是無(wú)感知的。體驗(yàn)提升。
第一:web服務(wù)器必須要能支持,分片下載。nginx 1.09 版本已上默認(rèn)的就支持了
第二:瀏覽器支持,谷歌和火狐都支持,火狐的分片邏輯有問(wèn)題。
修改pdf.js頁(yè)面的代碼
// rangeChunkSize : 就是分塊大小,默認(rèn):65536(64k)。修改數(shù)值就可以
比如65536*5
const DEFAULT_RANGE_CHUNK_SIZE = 65536;
十一、后端返回的是流的形式,轉(zhuǎn)成可用的本地的pdf文件的鏈接地址
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
},
你的pdfUrl=getObjectURL(file)也可以利用encodeURIComponent(pdfInfoUrl)
十二、修改默認(rèn)語(yǔ)言為簡(jiǎn)體中文
修改viewer.js頁(yè)面的代碼
defaultOptions.locale = {
// value: navigator.language || "en-US",
value: "zh-Cn",
kind: OptionKind.VIEWER
};十三、修改主題色
修改viewer.js頁(yè)面的代碼
const ViewerCssTheme = {
AUTOMATIC: 0, //跟隨瀏覽器顏色
LIGHT: 1,//亮色
DARK: 2,//暗色
};
總結(jié)
到此這篇關(guān)于vue中pdf.js的使用之pdf顯示、跳轉(zhuǎn)指定頁(yè)面及高亮關(guān)鍵詞的文章就介紹到這了,更多相關(guān)vue中pdf.js使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue實(shí)現(xiàn)在線預(yù)覽pdf文件和下載(pdf.js)
- vue使用pdf.js預(yù)覽pdf文件的方法
- vue插件開(kāi)發(fā)之使用pdf.js實(shí)現(xiàn)手機(jī)端在線預(yù)覽pdf文檔的方法
- vue3使用pdf.js來(lái)預(yù)覽文件的操作步驟(本地文件測(cè)試)
- Vue 集成 PDF.js 實(shí)現(xiàn) PDF 預(yù)覽和添加水印的步驟
- Vue使用PDF.js實(shí)現(xiàn)瀏覽pdf文件功能
- Vue中使用pdf.js實(shí)現(xiàn)PDF文檔展示功能實(shí)例
- vue如何使用pdf.js實(shí)現(xiàn)在線查看pdf文件功能
相關(guān)文章
Vue計(jì)算屬性與監(jiān)視屬性實(shí)現(xiàn)方法詳解
最近在學(xué)習(xí)vue,學(xué)習(xí)中遇到了一些感覺(jué)挺重要的知識(shí)點(diǎn),感覺(jué)有必要整理下來(lái),這篇文章主要給大家介紹了關(guān)于Vue.js中計(jì)算屬性、監(jiān)視屬性的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue ajax 攔截原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了vue ajax 攔截原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js基于ajax攔截實(shí)現(xiàn)無(wú)刷新登錄的相關(guān)原理與操作技巧,需要的朋友可以參考下2019-11-11
Vue2中Element?DatePicker組件設(shè)置默認(rèn)日期及控制日期范圍
后臺(tái)項(xiàng)目想使用時(shí)間選擇器選擇一段時(shí)間進(jìn)行數(shù)據(jù)篩選,所以下面這篇文章主要給大家介紹了關(guān)于Vue2中Element?DatePicker組件設(shè)置默認(rèn)日期及控制日期范圍的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue.js基于v-for實(shí)現(xiàn)批量渲染 Json數(shù)組對(duì)象列表數(shù)據(jù)示例
這篇文章主要介紹了vue.js基于v-for實(shí)現(xiàn)批量渲染 Json數(shù)組對(duì)象列表數(shù)據(jù),結(jié)合實(shí)例形式分析了vue.js使用v-for遍歷json格式數(shù)據(jù)渲染列表相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
Vue頁(yè)面切換空白與刷新404問(wèn)題的深度解析
在使用?Vue.js?開(kāi)發(fā)單頁(yè)應(yīng)用?(SPA)?的過(guò)程中,開(kāi)發(fā)者經(jīng)常會(huì)遇到兩個(gè)常見(jiàn)問(wèn)題,頁(yè)面切換時(shí)出現(xiàn)短暫的空白屏幕,以及刷新頁(yè)面時(shí)返回?404?錯(cuò)誤,下面我們就來(lái)講講這兩個(gè)問(wèn)題該如何將解決吧2025-05-05
vue學(xué)習(xí)筆記之v-if和v-show的區(qū)別
本篇文章主要介紹了vue學(xué)習(xí)筆記之v-if和v-show的區(qū)別,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
在vue2.0中引用element-ui組件庫(kù)的方法
這篇文章主要介紹了在vue2.0中引用element-ui組件庫(kù),需要的朋友可以參考下2018-06-06

