在做的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>