https://blog.csdn.net/qq_38543537/article/details/123715548
方法一:使用 vue-pdf 插件来实现
npm install --save vue-pdf
<template>
<div class="scrollBox">
<pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf"></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components:{
pdf
},
data(){
return {
pdfSrc:"http://image.cache.timepack.cn/nodejs.pdf",
numPages: null, // pdf 总页数
}
},
mounted() {
this.getNumPages()
},
methods: {
# 计算pdf页码总数
getNumPages() {
let loadingTask = pdf.createLoadingTask(this.pdfSrc)
loadingTask.promise.then(pdf => {
this.numPages = pdf.numPages
}).catch(err => {
console.error('pdf 加载失败', err);
})
},
}
</script>
.scrollBox{
overflow: auto;
height: 600px;
}
方法二:使用 iframe 方式实现
<!-- PDF预览 -->
<el-dialog title="PDF预览" :visible.sync="dialogVisible4" width="70%" append-to-body center>
<iframe :src="pdfSrc" frameborder="0" style="width: 100%; height: 100%"></iframe>
</el-dialog>
data() {
return {
dialogVisible4: false,
pdfSrc: '', // 将从后台获取到的 PDF 文件地址赋值给这个字段
}
}
效果图: