vue-pdf（v4.3.0）

一、安装

GitHub地址

npm install vue-pdf

此插件生成的worker.js文件路径需要注意一下，可能需要打补丁，见此文档vue-pdf 打包后[hash].worker.js路径问题—打补丁_Lambsbaa的博客-CSDN博客

二、属性

        1、src pdf文件地址

        2、page 当前页

        3、rotate 旋转角度

三、支持的事件

        1、error(err) 

                参数：错误

        2、page-size(width,height,scale) 这个是文档中未提及的一个事件

                参数：在pdf文件的某页渲染完成后，其宽度、高度、缩放比，可根据这些值倒推出原文件的实际尺寸

        3、link-clicked(pageNumber)

               参数：当前页码，单击内部链接时触发

        4、page-loaded(pageNumber)

                参数：当前页码，当前页加载完成时

        5、num-pages(numPages)

                参数：当前文件的页数

        6、password(updatePassword,reasonStr)

                参数：pdf密码、需要密码/错误密码的原因

        7、progress(ratio)

                参数：进度条，值在0-1区间

        8、loaded

                无参数，整个pdf文件加载完成时调用

四、公共方法

        1、print(dpi,pageList)

                参数：dpi是文档的打印分辨率（默认100）；pageList是要打印的页面列表（数组）

//全部打印
this.$refs.pdf.print()
//部分打印
this.$refs.pdf.print(100,[1,2])

        2、createLoadingTask(src[,options])

                参数：src即pdf文件地址（src不一定是指url，见CMapReaderFactory的使用情况下）； options即配置对象，创建一个PDFJS加载任务，可作为src树形使用和重用。这个任务是一个promise，通过numPages属性的pdf文档进行解析。

        3、beware

                当组件被销毁时，createLoadingTask（）返回的对象将无效。

        4、onPassword

                打开受密码保护的PDF时调用的回调

        5、onProgress

                返回加载进度的回调

                有些pdf文件的中文内容不显示时，需要使用createLoadingTask，设置一下字体，这种情况下@progress的方式无效，需要改为向createLoadingTask内传配置项onProgress的方式。    

this.fileUrlWithToken = pdf.createLoadingTask({
    url:'文件地址',
    cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/',
    cMapPacked: true,
},{
    // 进度条
    onProgress:(status)=>{
        this.loadedRatio = status.loaded / status.total
    },
})

        6、withCredentials

                在提起请求中是否发送cookies

五、中文字体的一些pdf文件中中文内容不显示

        1、方法1

        方法2在本地可以，在线上也可以，指定了字体库。

        （此处必须吐槽下自己，一开始cMapUrl和cMapPacked放到src里，后来不知道咋整的就到options里了，结果怎么都不好使，我也没发现，愣是耽误了一天）

this.fileUrlWithToken = pdf.createLoadingTask({
    url:'文件地址',
    cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/',
    cMapPacked: true,
},{
    // 进度条
    onProgress:(status)=>{
        this.loadedRatio = status.loaded / status.total
    },
})

        2、方法2

        这种解决方式：我本地是可以的，但是部署到测试环境不可以，不清楚是什么原因，最终用了方法1

        使用createLoadingTask+CMapReaderFactory.js，设置了字体链接。

                2.1、首先引入CMapReaderFactory

import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';

                2.2、使用createLoadingTask方法，此处的src就是个对象{url,CMapReaderFactory}。这个是翻了源码发现的，见下下图。注意设置了CMapReaderFactory的时候，再设置CMapUrl和cMapPacked是不生效的。

let url = res.body;
this.fileUrlWithToken = pdf.createLoadingTask(
    {
        url,
        CMapReaderFactory,
    },
    {
        onProgress: e => {
        this.loadedRatio = e.loaded / e.total
    },
});

源码： 

function createLoadingTask(src, options) {

		var source;
        // 此处判断了src是字符串、数组、对象等情况
		if ( typeof(src) === 'string' )
			source = { url: src };
		else if ( src instanceof Uint8Array )
			source = { data: src };
		else if ( typeof(src) === 'object' && src !== null )
			source = Object.assign({}, src);
		else
			throw new TypeError('invalid src type');

		// source.verbosity = PDFJS.VerbosityLevel.INFOS;
		// source.pdfBug = true;
		// source.stopAtErrors = true;
        
        // 支持的事件
		if ( options && options.withCredentials )
			source.withCredentials = options.withCredentials;

		var loadingTask = PDFJS.getDocument(source);
		loadingTask.__PDFDocumentLoadingTask = true; // since PDFDocumentLoadingTask is not public

		if ( options && options.onPassword )
			loadingTask.onPassword = options.onPassword;

		if ( options && options.onProgress )
			loadingTask.onProgress = options.onProgress;

		return loadingTask;
	}

                2.3、因为二次打开这种文件，页面仍然会空白，是因为缓存的原因，arry从有值变成无值。所以在每次打开前都清一下缓存。

 红框内代码如下：

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

之后执行一下打补丁的命令（前提是已经安装过patch-package，并在package.json中增加了"postinstall": "patch-package"）。可参考vue-pdf打补丁

npx patch-package vue-pdf