uniapp实现app移动端在线预览pdf文件

2020-06-17 19:39:16 阅读：1866 来源： 互联网

标签：uniapp .. 预览文件 app html pdf webView

移动端实现pdf预览

1、先根据uniapp的文档写个公共组件webView

<template>
    <view style="width: 100%;" >
        <web-view  :src="allUrl"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				src: '',
                allUrl:'',
				viewerUrl: '/hybrid/html/web/viewer.html', // 格式化文件流的一个js 文件 文末会分享出来
            }
        },
        onl oad(options) {
                let fileUrl = encodeURIComponent("pdf的地址") // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
                this.allUrl = this.viewerUrl + '?file=' + fileUrl
          }
    }
</script>

<style>

</style>

2、在对应的页面的预览事件中跳转到上面第一步的页面
例如：

uni.navigateTo({
    // url:'../pdf/pdf?pdf='+this[imgListName][index].src,
    url:'../common/webView'
   })

3、预览效果如下
在这里插入图片描述
4、js文件下载链接
链接：https://pan.baidu.com/s/16frPD2fidY–YPWCi8vtEA
提取码：2w6n

标签：uniapp,..,预览,文件,app,html,pdf,webView
来源： https://blog.csdn.net/qiumingshanjian/article/details/106761477

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

uniapp实现app移动端在线预览pdf文件