1、安装
npm install --save vue-pdf
2、pdf 页面显示
因项目需求 预览的是本地pdf文件
template标签代码：
<template>
<div class="app-container">
<div>
<pdf ref="pdf" v-for="i in numPages" :key="i" :src="url" :page="i"></pdf>
</div>
</div>
</template>
js
<script>
import pdf from "vue-pdf";
export default {
name: "SingleOuput",
components: {
pdf,
},
data() {
return {
url: "/today.pdf",
numPages: null, // pdf 总页数
};
},
mounted() {
this.getNumPages();
},
methods: {
getNumPages() {
console.log(this.url, "this.url");
let loadingTask = pdf.createLoadingTask(this.url);
console.log(loadingTask, "loadingTask===>");
loadingTask.promise
.then((pdf) => {
this.numPages = pdf.numPages;
})
.catch((err) => {
console.error("pdf 加载失败", err);
});
},
},
};
</script>
注意：本地pdf我这边放在了public中
之前是在url中写了 /public/xxx.pdf，一直报错，还是显示未能加载PDF文档，但是已经出现了查看PDF的轮廓，但是路径好像也没有问题啊，最后才发现，*原来写在 /pubilc目录下的文件不需要加上 /public，直接在src中写/xxx.pdf即可
url: "/today.pdf",
总结
这点是一个小问题，就是一个路径问题，但是也查了百度各种方法，最后解决的，所以下次还是要记住的。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79320.html
