pdf.js 预览文件缺失

推荐俩款使用预判pdf的插件，一个是vue-pdf，一个是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;

//解决文字缺少问题
params.cMapPacked = true
params.cMapUrl = 'https://cdn.jsdelivr.net/npm/[email protected]/cmaps/'

可以搜素一下pdfBug定位一下，新增两行代码即可

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

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

但是CMapReaderFactory存在缓存 也就是你发现打开一次后效果就没了，文字还是缺失或者乱码，

在 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,
                };
            });
        }
    };

如果你是做在移动端的页面，可引入hammerjs进行双指缩放

npm i hammjs -S

新建一个export的功能js

    import Hammer from 'hammerjs'//引用hammerjs
    
    //定义缩放方法，接收一个element参数：使用export暴露该方法
    export function zoomElement(el){
    
        var x = 0;//x轴偏移
        var y = 0;//y轴偏移
        var lastScale = 1;//上次缩放值
        var currentScale = 1;//当前缩放值
        var center;//双指中心点
        
        //初始化hammer
        var hammer = new Hammer(el);
        //缩放事件默认是关闭的，需要设置启用
        hammer.get('pinch').set({ enable: true });
        
        //监听缩放事件
        hammer.on("pinchmove pinchstart pinchin pinchout",e => {
            //缩放开始时获取上一次缩放值与双指中心点
            if(e.type == "pinchstart"){
                lastScale = currentScale || 1;
                center = e.center;
            }
            //当前缩放值 = 上一次缩放值 * 缩放比例
            currentScale = lastScale * e.scale;
            
            //如果缩放值小于1，重置为1
            if (currentScale < 1){
                currentScale = 1;
            }
            
            //偏移量 = 双指中心点 - 当前缩放值 * 双指中心点 = 双指中心点 *（1-当前缩放值）
            x = center.x * (1-currentScale)
            y = center.y * (1-currentScale)
            
            //设置transform
            el.style.transform="translateX("+(x)+"px)"+"translateY("+(y)+"px)"+"scale(" + (currentScale)+ ")"
        });
        //监听滑动事件
        hammer.on('panright panleft panup pandown',(e)=>{
            //滑动时：偏移量 = 滑动距离 + 当前偏移量
            var translateX = e.deltaX + x
            var translateY = e.deltaY + y
            //如果偏移X值大于0：表示视图已经滑到最左侧，重置为0
            if (translateX > 0){
                translateX = 0
            }
            //如果偏移Y值大于0：表示视图已经滑到最顶部，重置为0
            if (translateY > 0){
                translateY = 0
            }
            //如果偏移X值小于（屏幕宽度-元素宽度）：表示视图已经滑到最左侧，重置为0
            //屏幕宽度 = el.clientWidth
            //元素宽度 = el.getBoundingClientRect().width
            if (translateX < el.clientWidth - el.getBoundingClientRect().width){
                translateX = el.clientWidth - el.getBoundingClientRect().width
            }
            //如果偏移Y值大于（屏幕高度-元素高度）：表示视图已经滑到最左侧，重置为0
            //屏幕高度 = el.clientHeight
            //元素高度 = el.getBoundingClientRect().height
            if (translateY < el.clientHeight - el.getBoundingClientRect().height){
                translateY = el.clientHeight - el.getBoundingClientRect().height
            }
            //设置transform
            el.style.transform="translateX("+(translateX)+"px)"+"translateY("+(translateY)+"px)"+"scale(" + (currentScale)+ ")"
        });
        hammer.on('panend',(e)=>{
            //滑动结束：记录当前偏移量 
            x = e.deltaX + x;
            y = e.deltaY + y;
        
        })
    }

使用方法，引入该暴露的js

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

 


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