项目中需要用到PDF预览,查并尝试了很多种方法,使用了iframe,但是无法访问链接,可能是跨域问题,没有深究。使用了pdfjs,引入后模块报错,无法启动,可能是版本问题,最后选择了vue-pdf。
下载依赖:
npm install --save vue-pdf
引入:
import pdf from "vue-pdf";
使用(这里使用的是带有分页的,否则只会展示一页):
components: {
pdf,
},
<pdf ref="pdf" :src="url" v-for="i in numPages" :key="i" :page="i"> </pdf>
// 计算pdf页码总数
getNumPages() {
let loadingTask = ();
.then((pdf) => {
= ;
( )
})
.catch((err) => {
("pdf 加载失败", err);
});
},
注意:启动项目后,PDF正常展示但是会报错:
Cannot read properties of undefined (reading 'catch')
经查阅,原来是版本问题,解决:在控制台输入一下命令
npm i pdfjs-dist@2.5.207
npm i vue-pdf@4.2.0