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

一、背景

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();
        });
      },