vue使用vue-pdf预览pdf文件,带有换页、缩放、选择功能

1.安装

npm install --save vue-pdf

2.在需要用的页面引入 

import pdf from 'vue-pdf'

 3.带有放大、缩小、换页功能的用例






效果

vue使用vue-pdf预览pdf文件,带有换页、缩放、选择功能_第1张图片

4.pdf不显示签名和红章 

vue使用vue-pdf预览pdf文件,带有换页、缩放、选择功能_第2张图片

1.打开node_modules 文件夹下面的pdfjs-dist -> build -> pdf.worker.js

vue使用vue-pdf预览pdf文件,带有换页、缩放、选择功能_第3张图片

2.搜索data.fieldType,将if里面这句注释掉就可以

vue使用vue-pdf预览pdf文件,带有换页、缩放、选择功能_第4张图片

效果

vue使用vue-pdf预览pdf文件,带有换页、缩放、选择功能_第5张图片

**但是有个问题,这样配置后,显示有签章的页面就会报错Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': # could not be cloned. 目前还未解决

4.笔记 

1.src是pdf文件的路径,可以是相对地址、绝对地址、网址

2.:page当前pdf显示的页码,默认是1

3.@progress是pdf页面的加载进度(这个不是很懂)

4.@loaded  pdf加载的时候执行

5.@num-page监听pdf的加载,获取pdf总页数

6.@page-loaded是pdf加载成功的回调(应该是范围换页后的页码)

5.在对话框显示pdf,并且带有选择功能

效果:

vue使用vue-pdf预览pdf文件,带有换页、缩放、选择功能_第6张图片

代码:


 

 

 

你可能感兴趣的:(vue,vue-pdf)