vue路由中pdfjs插件使用及找不到 viewer.html解决
官方下载:
同目录下pdfjs-2.12.313-dist.zip为官方下载包
此包为pdf白色背景
使用中遇到问题:找不到viewer.html
解决方法:把里面的viewer copy出来扔到public或者static里面
![](https://img2020.cnblogs.com/blog/1553767/202201/1553767-20220114105558021-1641488197.png)
static下pdfjs
![](https://img2020.cnblogs.com/blog/1553767/202201/1553767-20220114105622269-1605654368.png)
上代码
<template> <div class="pdfjs"> <iframe width="100%" frameborder="0" style="width: 100%; height: 100%;" v-if ="src" :src="pdfSrc"></iframe> </div> </template> <script> export default { components: { }, data() { return { // 参数展示pdf地址 src: "https://aaeasy-file.newbanker.cn/pic/testforyuhan/裴士杰的专属报告_2021-11-02_11_17_21.pdf", // pdfjs模板 viewerUrl: '/static/pdfjs/web/viewer.html', pdfSrc: '', }; }, methods: { loadPDF() { this.pdfSrc=`${this.viewerUrl}?file=${encodeURIComponent(this.src)}` }, }, mounted: function() { this.loadPDF(); }, }; </script> <style lang="scss" scoped> .pdfjs {width:100%; height: 90vh;} </style>
本博客主要记录自己的学习点滴~,文章来源于总结,还有在工作中实际碰到的问题以记录。