项目当中附件预览,相信大家都会遇到,下面分享一个 PDF 预览组件,可直接使用
- 安装插件
npm install --save vue-pdf
<el-dialog
title="附件预览"
:visible.sync="previewPdf"
width="60%"
top="5vh"
append-to-body
>
<pdf ref="pdf" v-for="i in numPages" :key="i" :src="url" :page="i"> </pdf>
</el-dialog>
<script>
import pdf from 'vue-pdf'
export default {
components:{
pdf
},
data(){
return {
previewPdf: false,
url: "http://192.168.2.222/test.pdf",
numPages: null,
}
},
methods: {
getNumPages() {
let loadingTask = pdf.createLoadingTask(this.url);
loadingTask.promise
.then((pdf) => {
this.numPages = pdf.numPages;
})
.catch((err) => {
console.error("pdf 加载失败", err);
});
},
}
</script>
感谢您的来访,获取更多精彩文章请收藏本站。
© 版权声明
THE END
暂无评论内容