微信小程序实现文件下载预览功能

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

今天接到新需求，需要从微信小程序查看pdf文件，可下载，并且可以转发到朋友圈。那么，本文就着手实现一下该需求吧。

UI设计

需求分析：选择题目后，点击导出错题按钮，则会跳转至pdf文件，可转发可保存。并且文件名需要按照需求规则来。

解决方案

1.pdf文件下载 - wx.downloadFile

传送门：微信官方下载文件api

下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB。

返回值：是一个可以监听下载进度变化事件和取消下载的对象

2.pdf文件预览 - wx.openDocument

传送门：微信官方文件预览api

新开页面打开文档。微信客户端 7.0.12 版本前默认显示右上角菜单按钮，之后的版本默认不显示，需主动传入 showMenu。

最终实现

wx.showLoading({
    title: '加载中',
    mask: true
})
wx.downloadFile({
    url: 'http://xxx.pdf', // 预览pdf文件地址 
    filePath: wx.env.USER_DATA_PATH + '/' + '自定义文件名称.pdf', // 需要预览文件的名称
    success: function(res) {
        wx.hideLoading()
        const filePath= res.filePath; // 这个地方也是关键
        wx.showLoading({
            title: '正在打开',
            mask: true
        })
        wx.openDocument({
            filePath: filePath,
            fileType: 'pdf',
            success: function(res) {
        　　    uni.hideLoading()
            },
            fail: function(err) {
        　　    uni.hideLoading()
            }
        });
    },
    fail: function(err) {
    　　wx.hideLoading()
    }
});

至此，这个需求就通过微信官方提供的两个api解决了。其实也是非常简单的，你也可以动手试一试哦~