记微信小程序导出Excel解决方案

2021-02-02 04:27:02  卢浮宫  版权声明:本文为站长原创文章,转载请写明出处


一、背景


    1.1、业务需求来了

        在目前的小程序项目中有这样的一个需求:

            ① 小程序数据预览

            ② 导出按钮,生成excel

            ③ 支持在线预览和长按发送好友

    1.2、需求分析

        真个业务实现只有生成并预览excel文件是重点,解决了这个都一切顺利!


二、整体业务思路


    2.1、微信小程序支持

        选择了微信小程序,在享受其便利性的同时也决定了必须按照其规范来

        我们查询微信小程序关于文件的Api可以发现有如下两个:

        wx.downloadFile(Object object)、wx.openDocument(Object object)

    2.2、下面简单介绍下其作用

        downloadFile就是客户端发起一个Get请求,下载资源到本地,并返回保存到本地的临时路径。

        openDocument就是打开一个资源文件。

        下面附上两个接口的官方说明:

        DownloadFile:
                       

            

        其代码示例如下:

        
        wx.downloadFile({
url: 'https://example.com/audio/123', //仅为示例,并非真实的资源
success (res) {
// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调 // ,业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
wx.playVoice({
filePath: res.tempFilePath
})
}
}
})


        openDocument:

                    
        

        

        其代码示例如下:


        wx.downloadFile({
// 示例 url,并非真实存在
url: 'http://example.com/somefile.pdf',
success: function (res) {
const filePath = res.tempFilePath
wx.openDocument({
filePath: filePath,
success: function (res) {
console.log('打开文档成功')
}
})
}
})


    2.3、具体业务流程构建

        ① 小程序端发送请求给到后端

        ② 后端生成Excel文件

        ③ 后端上传Excel文件到服务器(这边使用的是OSS)

        ④ 后端响应并返回文件Url地址

        ⑤ 小程序端下载到本地

        ⑥ 小程序打开文件并使用自带功能进行分享


三、相关核心代码如下


    3.1、小程序端发起请求


      exportBillExcel(){
const that = this;
let postData = {
XXX // 请求数据
}
wx.showLoading({
title: '导出XXX中',
})
wxRequest.postJsonRequest(app.data.MpApiUrl + '/api/XXXExcel', postData)
.then(res => {
if(res.data.code==1){
let fileName = res.data.data.title;
wx.downloadFile({
url: that.data.baseUrl + res.data.data, // 这里指定filePath属性,不然会是一个临时文件,不能用对应的程序打开 filePath:wx.env.USER_DATA_PATH + '/' + fileName,
success(result) {
const filePath = result.filePath;
wx.openDocument({
filePath: filePath,
showMenu: true,
fileType: "xls",
success: rlt => {
console.log("打开文档成功",rlt);
},
fail: err => {
wx.showModal({
content: JSON.stringify(err),
showCancel: false
})
}
});
},
fail(error){
wx.showModal({
content: JSON.stringify(error),
showCancel: false
})
}
})
} else if (res.data.code == 500) {
wx.showModal({
content: res.data.message,
showCancel: false
})
} else if (res.data.code == 600) {
wx.showModal({
content: res.data.message,
showCancel: false,
success(res) {
if (res.confirm) {
wx.reLaunch({
url: '/pages/login/login',
})
}
}
})
}
})
.finally(() => {
wx.hideLoading();
});
},


    3.2、后端的核心代码

        ① 后端生成excel文件,可参考:Excel工具类,支持文件读取及前后端导出

        ② 上传到OSS,可参考:阿里云OSS文件管理分类解决方案阿里云OSS和腾讯云COS解决方案


四、最终效果展示

    

    


五、注意事项


    5.1、后端模板处理

        后端生成由于内容复杂,所以使用模板生成的。要注意模板的格式

    5.2、上传到OSS

        ① 一个文件大概在20k左右,对资源消耗也不是很大,

        ② 同时移动端也只是作为工作辅助方式,

            业务员主要的业务还是集中在Web的,当然Web就是上传到OSS了。

        ③ 做好文件分类处理

    5.3、微信下载文件

        一定要在下载路径中指定文件信息,如下:

        filePath:wx.env.USER_DATA_PATH + '/' + fileName,  

        上述直接指定文件属性为 XXX.xls类型的文件,不然下载下来就是个临时文件

    5.4、微信的下载配置服务器域名

        因为我们是使用的OSS,所以需要再微信小程序中配置downloadFile域名如下:

        PS:涉及隐私,所以不贴全,以具体情况为主

        https://XXX.aliyuncs.com

            


        5.5、做好异常处理

            微信小程序中出现问题不好排查(可参考文章:记一次Fiddler移动端抓包排查线上接口问题

            所以要做好每个请求相应的异常处理。


    更多精彩,请持续关注:guangmuhua.com



最新评论: