uni-app踩坑记之文件预览-一一网

记录uni-app实现在小程序和h5中在线预览pdf功能

笔者写这篇笔记是为了记录方便自己后期回忆的，毕竟能让我记住的应该都是花了我不少时间去踩坑的，哇的一声哭了出来！

在小程序中预览
- 在小程序中可以调用API下载文件，再打开文件，就可以实现
- 先调用downloadFile获取到本地文件路径tempFilePath
- 再调用openDocument就可以在新页面中预览文件，这个API还可以给参数fileType赋值，比如pdf，就会指定类型打开pdf文件

        uni.downloadFile({ 
            url: 'https://example.com/somefile.pdf', 
            success: function (res) { 
                var filePath = res.tempFilePath; 
                uni.openDocument({ 
                    filePath: filePath, 
                    success: function (res) { 
                        console.log('打开文档成功'); 
                    } 
                }); 
            } 
          });
复制代码

关于API的具体解释，可以前往官网查看文档openDocument的文档说明

在h5中预览
- 按照正常的逻辑，说到浏览器预览文件，可能首先想到的就是嵌一个a链接，但是这个对于苹果的手机浏览器来说是可以用的，然而安卓手机点击a链接之后则是会将文件直接下载下来，但是用户肯定不满意啊，好家伙，你还让我下载，企图占用我的手机内存，你这个开发不简单啊！
- 所以苦逼的开发只能想办法实现苹果安卓都能直接在线预览pdf，这时候就可以把pdf.js插件安排上了，可以去官网下载zip文件，或者上网百度一下，这块已经有挺多大佬已经整理了，这里放一个我最后解决问题参考的链接
- 这个小哥写的还挺明白的，基本上跟着走就能实现

        <template>
            <view>
                <web-view :src="https://juejin.cn/post/pdfUrl"></web-view>
            </view>
        </template>

        <script>
        export default {
            data() {
                return {
                    pdfUrl:'',
                    from:''
                }
            },
            onLoad() {
                这里的pdfUrl可以是线上pdf的地址哦，而不是文件流（笔者还比较菜，文件流这块还没学，有点搞不清楚哈，欢迎大家的交流）
                this.pdfUrl = '/hybrid/html/web/viewer.html?file='+encodeURIComponent(pdfUrl)
            },
        }
        </script>
复制代码