一、安装
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