vue中pdf.js的使用之pdf顯示、跳轉指定頁面及高亮關鍵詞
一、下載pdf.js
https://github.com/mozilla/pdf.js
里面有很多的版本， 高版本的可能瀏覽器不兼容或者還要考慮手機上面的，最好下載低版本的，這里是v2.16.105-dist版本
二、引入到本地的項目中
在本地static里面創(chuàng)建文件夾pdfjs，然后將下載包里面的文件放進pdfjs。
pdf.js包的目錄結構
三、實現(xiàn)預覽pdf
1、本地的PDF文件，直接在瀏覽器地址欄輸入打開
利用 web里面的viewer.html就可以直接打開pdf,里面有默認的一個pdf文檔。
直接在瀏覽器地址欄打開pdf: 開發(fā)地址 + 存放viewer.html文件夾地址
比如按照以上步驟方法為 http://192.168.0.109:8081/static/pdfjs/web/viewer.html
只要能打開沒有報錯就沒有什么問題
2、實現(xiàn)自己的pdf預覽包括后端返回的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",
};
},
}只需要在上面的連接上加上一個?file=your-pdf-url就行了：（這里是組件注意viewer.html存放的位置）
比如：我的顯示地址是：
this.iframeSrc='../../../static/pdfjs/web/viewer.html?file='+pdfUrl
解決報錯：
出現(xiàn)這個錯誤就是跨域的問題，找到pdfjs/web/viewer.js文件，注銷跨域代碼就可以
// if (fileOrigin !== viewerOrigin) {
// throw new Error("file origin does not match viewer's");
// }
四、跳轉到指定頁面
根據(jù)pdf.js內(nèi)置函數(shù)，可直接修改當前頁面，沒有太大的跳動，利用Iframe.
最好在pdf或iframe加載完成之后跳轉頁面
方法一：
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查找關鍵詞并可以監(jiān)聽updatefindcontrolstate統(tǒng)計個數(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)計每頁搜索條數(shù)
_iframe.PDFViewerApplication.eventBus.on('updatefindcontrolstate', (e) => {
console.log(e)
console.log(e.source._pageMatches);//這里面是一個數(shù)組，
})
},六、修改頁面大小為實際大小
修改viewer.js頁面的代碼
const DEFAULT_SCALE_VALUE = "auto" // 修改成 const DEFAULT_SCALE_VALUE = "page-actual" //實際大小
修改viewer.html頁面的代碼
找到id="scaleSelectContainer" 下面的id="pageActualOption",如果有selected,就修改成selected="selected",沒有就不改。
七、每次加載pdf都是在第一頁
修改viewer.js頁面的代碼
找到 setInitialView函數(shù) 在里面添加一句代碼：
this.pdfViewer.currentPageNumber=1;
八、修改pdf滾動方式為橫向
修改viewer.html頁面的代碼
找到id="scrollModeButtons" 下面的id="scrollWrapped", 在這個button上面的class上面添加一個toggled 同時修改 aria-checked="true"
修改viewer.js頁面的代碼
this._scrollMode = _ui_utils.ScrollMode.VERTICAL;
修改成
this._scrollMode = _ui_utils.ScrollMode.WRAPPED;
九、清除pdf緩存
修改viewer.js頁面的代碼
async _writeToStorage() {
const databaseStr = JSON.stringify(this.database);
// 清除pdf緩存 注銷這句代碼
// localStorage.setItem("pdfjs.history", databaseStr);
}
// 不起作用就在注釋這句代碼，
async _writeToStorage(prefObj) {
// localStorage.setItem("pdfjs.preferences", JSON.stringify(prefObj));
}十、pdf.js實現(xiàn)分片加載
分片加載就是pdf先將前面內(nèi)容顯示出來，后面的在下載，用戶是無感知的。體驗提升。
第一：web服務器必須要能支持，分片下載。nginx 1.09 版本已上默認的就支持了
第二：瀏覽器支持，谷歌和火狐都支持，火狐的分片邏輯有問題。
修改pdf.js頁面的代碼
// rangeChunkSize ： 就是分塊大小，默認：65536（64k）。修改數(shù)值就可以
比如65536*5
const DEFAULT_RANGE_CHUNK_SIZE = 65536;
十一、后端返回的是流的形式，轉成可用的本地的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)
十二、修改默認語言為簡體中文
修改viewer.js頁面的代碼
defaultOptions.locale = {
// value: navigator.language || "en-US",
value: "zh-Cn",
kind: OptionKind.VIEWER
};十三、修改主題色
修改viewer.js頁面的代碼
const ViewerCssTheme = {
AUTOMATIC: 0, //跟隨瀏覽器顏色
LIGHT: 1,//亮色
DARK: 2,//暗色
};
總結
到此這篇關于vue中pdf.js的使用之pdf顯示、跳轉指定頁面及高亮關鍵詞的文章就介紹到這了,更多相關vue中pdf.js使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
wangEditor是一個輕量級web富文本編輯器,配置方便,使用簡單,下面這篇文章主要給大家介紹了關于vue中wangEditor5編輯器的基本使用,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
Vue計算屬性與監(jiān)視屬性實現(xiàn)方法詳解
最近在學習vue,學習中遇到了一些感覺挺重要的知識點,感覺有必要整理下來,這篇文章主要給大家介紹了關于Vue.js中計算屬性、監(jiān)視屬性的相關資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue ajax 攔截原理與實現(xiàn)方法,結合實例形式分析了vue.js基于ajax攔截實現(xiàn)無刷新登錄的相關原理與操作技巧,需要的朋友可以參考下2019-11-11
Vue2中Element?DatePicker組件設置默認日期及控制日期范圍
后臺項目想使用時間選擇器選擇一段時間進行數(shù)據(jù)篩選,所以下面這篇文章主要給大家介紹了關于Vue2中Element?DatePicker組件設置默認日期及控制日期范圍的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
vue.js基于v-for實現(xiàn)批量渲染 Json數(shù)組對象列表數(shù)據(jù)示例
這篇文章主要介紹了vue.js基于v-for實現(xiàn)批量渲染 Json數(shù)組對象列表數(shù)據(jù),結合實例形式分析了vue.js使用v-for遍歷json格式數(shù)據(jù)渲染列表相關操作技巧,需要的朋友可以參考下2019-08-08
在使用?Vue.js?開發(fā)單頁應用?(SPA)?的過程中,開發(fā)者經(jīng)常會遇到兩個常見問題,頁面切換時出現(xiàn)短暫的空白屏幕,以及刷新頁面時返回?404?錯誤,下面我們就來講講這兩個問題該如何將解決吧2025-05-05
這篇文章主要介紹了Vue中使用setTimeout問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了vue學習筆記之v-if和v-show的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要給大家介紹了關于Vue組件傳參11種方式的相關資料,文中通過代碼示例介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了在vue2.0中引用element-ui組件庫,需要的朋友可以參考下2018-06-06