本文介绍了一个Vue.js中用于预览PDF文件的组件。首先需要安装vue-pdf插件，然后在组件中引入并注册该插件。在模板中使用pdf标签来加载PDF文件并显示预览。通过调用getNumPages方法可以获取PDF文件的页数。最后提供了一个示例代码，并指定了PDF文件的URL。
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结
投诉项目当中附件预览，相信大家都会遇到，下面分享一个PDF预览组件，可直接使用
1
| npm install --save vue-pdf
|
1
2
3
4
5
6
7
8
9
| <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>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <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>
|
