推薦倆款使用預(yù)判pdf的插件巧鸭，一個(gè)是vue-pdf，一個(gè)是pdf-dist

如果是pdf-dist
需要更改一下node_modules下的pdf.js文件

params.rangeChunkSize = params.rangeChunkSize || 
DEFAULT_RANGE_CHUNK_SIZE;
params.CMapReaderFactory = params.CMapReaderFactory || 
_display_utils.DOMCMapReaderFactory;
params.ignoreErrors = params.stopAtErrors !== true;
params.fontExtraProperties = params.fontExtraProperties === true;
params.pdfBug = params.pdfBug === true;

//解決文字缺少問(wèn)題
params.cMapPacked = true
params.cMapUrl = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/'

可以搜素一下pdfBug定位一下逢防，新增兩行代碼即可

如果使用vue-pdf，引入node_modules下的

 import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";
  that.url = pdf.createLoadingTask({
          url: e.target.result,
          CMapReaderFactory
        });

但是CMapReaderFactory存在緩存 也就是你發(fā)現(xiàn)打開(kāi)一次后效果就沒(méi)了，文字還是缺失或者亂碼忽匈，

在 vue-pdf/src/CMapReaderFactory.js中疲陕，增加一行代碼即可

        delete require.cache[require.resolve('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap')];

完整代碼

    import { CMapCompressionType } from 'pdfjs-dist/es5/build/pdf.js'

    // see https://github.com/mozilla/pdf.js/blob/628e70fbb5dea3b9066aa5c34cca70aaafef8db2/src/display/dom_utils.js#L64

    export default function() {

        this.fetch = function(query) {
            delete require.cache[require.resolve('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap')];
            return import('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap' /* webpackChunkName: "noprefetch-[request]" */)
            .then(function(bcmap) {

                return {
                    cMapData: bcmap.default,
                    compressionType: CMapCompressionType.BINARY,
                };
            });
        }
    };

如果你是做在移動(dòng)端的頁(yè)面方淤，可引入hammerjs進(jìn)行雙指縮放

npm i hammjs -S

新建一個(gè)export的功能js

    import Hammer from 'hammerjs'//引用hammerjs
    
    //定義縮放方法，接收一個(gè)element參數(shù)：使用export暴露該方法
    export function zoomElement(el){
    
        var x = 0;//x軸偏移
        var y = 0;//y軸偏移
        var lastScale = 1;//上次縮放值
        var currentScale = 1;//當(dāng)前縮放值
        var center;//雙指中心點(diǎn)
        
        //初始化hammer
        var hammer = new Hammer(el);
        //縮放事件默認(rèn)是關(guān)閉的蹄殃，需要設(shè)置啟用
        hammer.get('pinch').set({ enable: true });
        
        //監(jiān)聽(tīng)縮放事件
        hammer.on("pinchmove pinchstart pinchin pinchout",e => {
            //縮放開(kāi)始時(shí)獲取上一次縮放值與雙指中心點(diǎn)
            if(e.type == "pinchstart"){
                lastScale = currentScale || 1;
                center = e.center;
            }
            //當(dāng)前縮放值 = 上一次縮放值 * 縮放比例
            currentScale = lastScale * e.scale;
            
            //如果縮放值小于1携茂，重置為1
            if (currentScale < 1){
                currentScale = 1;
            }
            
            //偏移量 = 雙指中心點(diǎn) - 當(dāng)前縮放值 * 雙指中心點(diǎn) = 雙指中心點(diǎn) *（1-當(dāng)前縮放值）
            x = center.x * (1-currentScale)
            y = center.y * (1-currentScale)
            
            //設(shè)置transform
            el.style.transform="translateX("+(x)+"px)"+"translateY("+(y)+"px)"+"scale(" + (currentScale)+ ")"
        });
        //監(jiān)聽(tīng)滑動(dòng)事件
        hammer.on('panright panleft panup pandown',(e)=>{
            //滑動(dòng)時(shí)：偏移量 = 滑動(dòng)距離 + 當(dāng)前偏移量
            var translateX = e.deltaX + x
            var translateY = e.deltaY + y
            //如果偏移X值大于0：表示視圖已經(jīng)滑到最左側(cè)，重置為0
            if (translateX > 0){
                translateX = 0
            }
            //如果偏移Y值大于0：表示視圖已經(jīng)滑到最頂部诅岩，重置為0
            if (translateY > 0){
                translateY = 0
            }
            //如果偏移X值小于（屏幕寬度-元素寬度）：表示視圖已經(jīng)滑到最左側(cè)讳苦，重置為0
            //屏幕寬度 = el.clientWidth
            //元素寬度 = el.getBoundingClientRect().width
            if (translateX < el.clientWidth - el.getBoundingClientRect().width){
                translateX = el.clientWidth - el.getBoundingClientRect().width
            }
            //如果偏移Y值大于（屏幕高度-元素高度）：表示視圖已經(jīng)滑到最左側(cè)，重置為0
            //屏幕高度 = el.clientHeight
            //元素高度 = el.getBoundingClientRect().height
            if (translateY < el.clientHeight - el.getBoundingClientRect().height){
                translateY = el.clientHeight - el.getBoundingClientRect().height
            }
            //設(shè)置transform
            el.style.transform="translateX("+(translateX)+"px)"+"translateY("+(translateY)+"px)"+"scale(" + (currentScale)+ ")"
        });
        hammer.on('panend',(e)=>{
            //滑動(dòng)結(jié)束：記錄當(dāng)前偏移量 
            x = e.deltaX + x;
            y = e.deltaY + y;
        
        })
    }

使用方法吩谦，引入該暴露的js

import { zoomElement } from "./zoom.js";

 <div style="height: 100%" ref="test" class="test"></div>

.test {
  transform-origin: 0 0;
  touch-action: pan-x pan-y pinch-zoom;
}
mounted(){
let zoomEl = this.$refs.test;
zoomElement(zoomEl);
}