一、下載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文件，直接在瀏覽器地址欄輸入打開

利用 web里面的viewer.html就可以直接打開pdf,里面有默認(rèn)的一個(gè)pdf文檔。

直接在瀏覽器地址欄打開pdf: 開發(fā)地址 + 存放viewer.html文件夾地址

比如按照以上步驟方法為 http://192.168.0.109:8081/static/pdfjs/web/viewer.html

只要能打開沒有報(bào)錯(cuò)就沒有什么問(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文件，注銷跨域代碼就可以

// 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è)面，沒有太大的跳動(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)聽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",沒有就不改。

七、每次加載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緩存  注銷這句代碼
    // 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)，后面的在下載，用戶是無(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)文章希望大家以后多多支持腳本之家！

最新評(píng)論