目錄
一、下載pdf.js
二、引入到本地的項目中
三、實現預覽pdf
四、跳轉到指定頁面
五、利用pdf里面的find查找關鍵詞
六、修改頁面大小為實際大小
一、下載pdf.js
https://github.com/mozilla/pdf.js
里面有很多的版本，?高版本的可能瀏覽器不兼容或者還要考慮手機上面的，最好下載低版本的，這里是v2.16.105版本
二、引入到本地的項目中
在本地static里面創建文件夾pdfjs，然后將下載包里面的文件放進pdfjs。
pdf.js包的目錄結構
三、實現預覽pdf
1、本地的PDF文件，直接在瀏覽器地址欄打開
利用?web里面的viewer.html就可以直接打開pdf,里面有默認的一個pdf文檔。
直接在瀏覽器地址欄打開pdf: 開發地址 + viewer.html文件夾地址
比如按照以上步驟方法為?http://192.168.0.109:8081/static/pdfjs/web/viewer.html
只要能打開沒有報錯就沒有什么問題
2、后端返回的pdf地址，?這里是創建組件利用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
解決報錯：
出現這個錯誤就是跨域的問題，找到pdfjs/web/viewer.js文件，注銷跨域代碼就可以
// if (fileOrigin !== viewerOrigin) {
? ??// ? throw new Error("file origin does not match viewer's");
// }
四、跳轉到指定頁面
根據pdf.js內置函數，可直接修改當前頁面，沒有太大的跳動，利用Iframe
const pdfFrame = document.getElementById('myIframe').contentWindow pdfFrame.PDFViewerApplication.page = 10
五、利用pdf里面的find查找關鍵詞
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統計每頁搜索條數
? ? ? ? ? ? _iframe.PDFViewerApplication.eventBus.on('updatefindcontrolstate', (e) => {
? ? ? ? ? ? ? ? console.log(e)
? ? ? ? ? ? ? ? console.log(e.source._pageMatches);
? ? ? ? ? ? })
? ? ? ? },
六、修改頁面大小為實際大小
修改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函數? 在里面添加一句代碼：
this.pdfViewer.currentPageNumber=1;
八、修改pdf滾動方式為橫向
修改viewer.html頁面的代碼
?
