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(res.body,{
    cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/',
    cMapPacked: true,
    onProgress:(status)=>{
        console.log("xxxxx",status)
        this.loadedRatio = status.loaded / status.total
        console.log('进度',this.loadedRatio)
    },
})

        6、withCredentials

                在提起请求中是否发送cookies

五、常见问题

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

解决办法：我使用了createLoadingTask+CMapReaderFactory.js，设置了字体链接。

                1.1、首先引入CMapReaderFactory

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

                1.2、使用createLoadingTask方法，此处的src就是个对象{url,CMapReaderFactory}。这个是翻了源码发现的，见下下图

let url = res.body;
// 某些pdf文件的字体缺少，导致内容为空
this.fileUrlWithToken = pdf.createLoadingTask(
    // src
    {
        url,
        CMapReaderFactory,
    },
    // options   
    {
        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;
	}

                1.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