vue实现pdf在线查看功能 vue-pdf
vue实现pdf在线查看功能vue-pdf转载: 实现在线查看功能–>https://www.cnblogs.com/tangwei89/p/11526293.html问题是实现之后只显示第一页 (解决方法)—>https://www.jianshu.com/p/a640ce9d4882
·
首先用npm安装依赖
npm install --save vue-pdf
在所需要的的页面中引入
// 在线预览pdf文件
import pdf from 'vue-pdf'
<pdf ref="pdf" :src="pdfUrl" v-for="i in numPages" :key="i" :page='i'>
</pdf>
data () {
return {
numPages: null: '',
pdfUrl: ``
}
},
components: {
pdf
}
Taskbook (row) {
this.$http.get(`url`).then(({
data: res
}) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
console.log('查看任务书-->', res)
if (res.data.length === 0) {
this.$message({
message: '未找到PDF文件',
type: 'warning'
})
} else {
let missionBook = JSON.parse(res.data[0].missionBook)
this.pdfUrl = `${window.SITE_CONFIG['apiURL']}/attach/download/${missionBook[0].id}?token=${sessionStorage.getItem('token')}`
this.pdfName = missionBook[0].name
this.getNumPages()
}
}).catch(() => {})
}
// 解决pdf只显示第一页的问题
getNumPages() {
let loadingTask = pdf.createLoadingTask(this.pdfUrl)
loadingTask.promise.then(pdf => {
this.numPages = pdf.numPages
}).catch(err => {
console.error('pdf 加载失败-->', err)
})
}
更多推荐
已为社区贡献1条内容
所有评论(0)