1.下载
npm i vue-pdf
//我使用的是4.2.0版本,版本可能影响问题的解决
npm i [email protected]
2.作为组件引入
import pdf from 'vue-pdf';
export default {
components:{
pdf
}
}
3.使用
定义pages变量稍后用来获取pdf的页数
<pdf v-for="i in pages" :key="i" :src="pdfUrl" :page="i"/>
获取pdf页数
export default {
data(){
return {
pages:0
}
},
methods:{
// 获取pdf页码
getPages(url){
let loadingTask = pdf.createLoadingTask(url);
loadingTask.promise.then(pdf => {
this.url = loadingTask;
this.pages = pdf.numPages;
}).catch((err) => {
this.$message.error('pdf加载失败');
console.error('pdf加载失败',err);
})
}
}
}
4.解决签章不显示的问题
该问题的解决参考如下文章:https://blog.csdn.net/gby23300/article/details/108833167
到node_modules\pdfjs-dist\es5\build\pdf.worker.js该文件里改写如下代码:
if (data.fieldType === "Sig") {
data.fieldValue = null;
//pdf显示红印章--注释掉
//_this3.setFlags(_util.AnnotationFlag.HIDDEN);
}