vue中pdf.js的使用，包括pdf显示，跳转指定页面，高亮关键词

• 目录

  一、下载pdf.js

  二、引入到本地的项目中

  三、实现预览pdf

  四、跳转到指定页面

  五、利用pdf里面的find查找关键词并可以监听updatefindcontrolstate统计个数

  六、修改页面大小为实际大小

  七、每次加载pdf都是在第一页

  八、修改pdf滚动方式为横向

  九、清除pdf缓存

  十、pdf.js实现分片加载

  十一、后端返回的是流的形式，转成可用的本地的pdf文件的链接地址

   十二、修改默认语言为简体中文

  十三、修改主题色

一、下载pdf.js

https://github.com/mozilla/pdf.js

里面有很多的版本， 高版本的可能浏览器不兼容或者还要考虑手机上面的，最好下载低版本的，这里是v2.16.105-dist版本

二、引入到本地的项目中

在本地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预览包括后端返回的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.

最好在pdf或iframe加载完成之后跳转页面

方法一：

const pdfFrame = document.getElementById('myIframe').contentWindow pdfFrame.PDFViewerApplication.page = 10

方法二：

可以直接在地址栏上最后拼接参数#page=6

iframeSrc: "../../../static/pdfjs2.16.105/web/viewer.html?#page=6",

五、利用pdf里面的find查找关键词并可以监听updatefindcontrolstate统计个数

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页面的代码

找到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实现分片加载

分片加载就是pdf先将前面内容显示出来，后面的在下载，用户是无感知的。体验提升。

第一：web服务器必须要能支持，分片下载。nginx 1.09 版本已上默认的就支持了
第二：浏览器支持，谷歌和火狐都支持，火狐的分片逻辑有问题。

修改pdf.js页面的代码

// rangeChunkSize ： 就是分块大小，默认：65536（64k）。修改数值就可以

比如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,//暗色

};