vue-pdf的注意事项

vue2项目

node版本切换到14.21.3

npm install --save vue-pdf@4.2.0
npm install pdfjs-dist@2.5.207

[^ 注意]：一般情况下，执行上述命令就可以解决这个问题，但有时候在执行完后还是不行，这时候如果你执意要搜索为什么，答案普遍都是这个，有可能还有有一个说是脚手架版本太高，也就是@vue/cli版本是4.5以上，需要降一下版本，这时候可不要贸然去降低脚手架版本了，原因可能不是这个，注意了,vue-pdf的最新版本是2020年发布的，距离现在已经有4年了，我们都忽视了node版本，那时候的node版本可没有我们现在安装的那么高，所以就会出现不兼容的情况，（当时我使用的是node16，切换到14版本就可以了）这时候换个node版本，删除node_modules文件夹重新编译就可以解决引入报错的问题，如果不想卸载node可以参考nvm教程，快速切换node版本。

<template><div class="home"><pdfv-for="i in pageCount":src="pdfUrl":key="i + 'pdf'":page="i"class="pdf-item"></pdf></div>
</template>
<script>
import pdf from 'vue-pdf'
export default {data() {return {pageCount:1,pdfUrl:"http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf"};},components: {pdf},mounted() {this.previewFile()},methods:{async previewFile() {try {let loadingTask = pdf.createLoadingTask(this.pdfUrl);loadingTask.promise.then(pdf => {this.pageCount = pdf.numPages;}).catch((e) => {console.log("pdf初始化错误", e);})} catch (e) {console.log("pdf加载出错了", e);}}}
}
</script>

vue3项目

npm install @vue-office/pdf vue-demi@0.14.6


<template><div class="apdd"><vue-office-pdf :src="pdfUrl"@rendered="renderedHandler"@error="errorHandler"/></div>
</template><script setup>//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
import { ref, onMounted, nextTick } from "vue";
const pageCount = ref(1);
const pdfUrl = ref("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf"
);const renderedHandler = () => {console.log("渲染完成")
};
const errorHandler = () => {console.log("渲染失败")
};
</script>