步骤
1. 安装依赖
npm install --save vue-pdf
2. 在需要的页面,和定义组件一样那种 引入、注册,使用插件
import pdf from 'vue-pdf'
components:{
pdf
},
export default {
data(){
return {
numPages:0,
pdfSrc:"",
}
}
}
3.页面里使用
<pdf
v-for="(item,index) in numPages"
:key="item"
:src="pdfSrc"
:page="item"
ref="pdf">
</pdf>
4.触发获取PDF的方法
getPdf(item) {
this.pdfSrc = ""
let p = {}
axios({
url:'',
method:"post",
params:p,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob',
}).then(res=>{
const blob = new Blob([res.data],{
type:"application/pdf;charset=utf-8"
})
this.pdfSrc = window.URL.createObjectURL(blob)
let loadignTask = pdf.createLoadingTask(this.pdfSrc)
loadignTask.promise.then(pdf=>{
this.numPages = pdf.numPages
})
}).catch(e => {
this.$message({
message:'查看预览失败',
type:'error'
})
})
},