admin管理员组文章数量:1648973
写在前边:
踩了N多次坑,耗时1整天,找了网上很多的文章,最后综合各种方法,才得以解决。
首先PDF预览有很多种情况,pc浏览器的预览相对简单很多,也有很多现成的案例。这里我们只说手机端的实现。我的需求是后端返回一个PDF的下载地址,这个地址在浏览器上打开就是下载PDF文件,本来是想直接让vue-pdf的src直接等于这个下载链接,但是中间碰到了跨域的错误(本地的地址和开发环境不同),这样直接使用有点行不通,后来改成使用axios请求,下载到文件之后,又碰到一堆解析的问题,总结了一下网上各位大神的方法,主要是需要把请求回来的PDF文件流转换成Blob文件,才可以成功。先看效果:
项目中使用的vue,vant2框架。
第一步:先导入框架 package.json的dependencies中添加 : "vue-pdf": "^4.2.0",
然后执行 npm install
第二部:项目中的使用
布局文件:
<template>
<div class="parent-container">
<!-- -->
<div class="head-bar">
<img class="left" :src="leftImg" @click="goBack" />
<div class="head-title">操作手册</div>
</div>
<div class="div-pdf">
<pdf
v-for="item in pageTotal"
:key="item"
:src="pdfSrc"
:page="item"
></pdf>
</div>
</div>
</template>
js代码:
// 导入vue-pdf
import pdf from 'vue-pdf'
export default {
name: 'EagleAppTdrt10OperationInstruction',
data() {
return {
pdfSrc: '',
pageTotal: 1,
}
},
components: {
pdf,
},
mounted(){
this.$axios
.get(
`你的文件下载地址`,
// 需要添加这个,不添加就会有警告,PDF解析失败
{ responseType: 'blob' }
)
.then((res) => {
const blob = new Blob([res], {
type: 'application/pdf;charset-UTF-8',
})
const url = window.URL.createObjectURL(blob)
// 到这里就可以显示了,但是只显示了一页
this.pdfSrc = url
// 布局中使用了v-for设置出所有的PDF页,后续你可以自己添加上一页下一页的按钮,我目前是直接所有的都显示出来
this.getNumPages(url)
})
}
// 设置分页
getNumPages(url) {
this.pdfSrc = pdf.createLoadingTask(url)
this.pdfSrc.promise
.then((pdf) => {
this.pageTotal = pdf.numPages
})
.catch((err) => {
console.error('pdf加载失败', err)
})
},
css代码:
.parent-container {
display: flex;
width: 100%;
flex-direction: column;
height: 100vh;
background-color: #ffffff;
overflow-x: hidden;
.head-bar {
width: 100%;
height: 126px;
}
.div-pdf {
width: 100%;
height: 100%;
}
}
最后,初学vue,如有不足之处,请多多指正!
版权声明:本文标题:手机端浏览器使用vue-pdf实现PDF文件预览(踩坑版) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729504287a1203445.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论