在做的Vue项目中，遇到了要上传文件，其中pdf要实现预览，网上查到vue-pdf插件可实现该功能。实现步骤如下：
1.安装插件
npm install --save vue-pdf
2.简单的demo 完整代码
<template><div><a @click="handlePreview()" alt="查看文件" class=""><a-icon type="eye" /></a><a-modal width='1000px' :visible="previewPdfVisible" @cancel="handlePdfCancel" @ok="handlePdfCancel"><pdf ref="pdf":src="url"></pdf></a-modal></div></template><script>export default {components:{pdf},data(){return {url:"",}},methods:{//查看文件handlePreview(){let fileUrl='http://10.4.4.83:9999/sys/common/static/temp/1645755049088.pdf';this.previewPdfVisible=true;this.url=fileUrl;},}}</script><style></style>
以上只能展示一页
3.多页展示
<template><div><a @click="handlePreview()" alt="查看文件" class=""><a-icon type="eye" /></a><a-modal width='1000px' :visible="previewPdfVisible" @cancel="handlePdfCancel" @ok="handlePdfCancel"><pdf ref="pdf"v-for="i in pdfNumPages":key="i":page="i":src="previewPdf">></pdf></a-modal></div></template><script>import pdf from 'vue-pdf';export default {components:{pdf},data(){return {previewPdfVisible:false,previewPdf:"",pdfNumPages: null, // pdf 总页数}},methods:{handlePdfCancel(){this.previewPdfVisible = false;},//查看文件handlePreview(){let fileUrl='http://10.4.4.83:9999/sys/common/static/temp/结算中心_1645755049088.pdf';this.previewPdfVisible=true;this.previewPdf=fileUrl;//计算pdf页码总数let loadingTask = pdf.createLoadingTask(this.previewPdf)loadingTask.promise.then(pdf => {this.pdfNumPages = pdf.numPages}).catch(err => {console.error('pdf 加载失败', err);})},}}</script><style></style>
