uniapp在线预览pdf文件
data() {return {viewerUrl: '/hybrid/html/web/viewer.html', //引入hybrid包pdfUrl: ''},const fileUrl = encodeURIComponent(decodeURIComponent(e.pdfUrl)) //将链接编码
·
uniapp在线预览pdf文件
1、下载hybrid
包
这个可以网上自己找一下,很好找的一个包,并将包放在文件中,如下图:
2、自定义一个展示pdf的组件
<template>
<view style="width: 100%;height: 95vh">
<view class="">
<web-view :src="pdfUrl"></web-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
viewerUrl: '/hybrid/html/web/viewer.html', //引入hybrid包
pdfUrl: ''
};
},
onLoad(e) {
const fileUrl = encodeURIComponent(decodeURIComponent(e.pdfUrl)) //将链接编码
this.pdfUrl = this.viewerUrl + '?file=' + fileUrl
}
}
</script>
<style lang="scss">
</style>
组件可直接粘贴使用,备注较为清晰
通过父组件按钮点击跳转,并将pdf的链接传递给组件,解析后将可直接在线预览pdf;
文件仅供自己参考(学习笔记)!
更多推荐
所有评论(0)