美文网首页程序员微信小程序
微信小程序原生导出excel文件

微信小程序原生导出excel文件

作者: 小小_128 | 来源:发表于2020-08-31 10:04 被阅读0次

效果图 功能---导出表格存储至手机

example.png

实现步骤:通过后端返回的字节流 -- wx.downloadFile() -- wx.getFileSystemManager() -- wx.openDocument()

exportFun() {  //点击导出
    let token = wx.getStorageSync('token');
    let that = this
    wx.request({
      url: commonTool.baseUrl + "mall/myShop/export/" + app.globalData.userInfo.id,
      data: {
        seachStr: that.data.params  // 筛选导出
      },
      header: {
        "content-type": "application/json",
        "token": token
      },
      dataType: "json",
      success: res => {
       // 返回的 res.data.msg 是一个名称eg: xxxx.xlxs
        if (res.data.code == 0) {
          that.download(res.data.msg)
        }
      }
    })
  },
// 查看导出返回的字节流
download(fileName) {
  let token = wx.getStorageSync('token');
  wx.downloadFile({  // downloadFile的url必须为http或者https
    url: commonTool.baseUrl + "mall/myShop/common/download?delete=true&fileName=" + fileName,
    header: {
      "content-type": "application/json",
      "token": token
    },
    responseType: "arraybuffer", //注意这里的responseType
    success(res) {
      console.log('downloadfile', res)
      const manage = wx.getFileSystemManager();
      if (res.statusCode === 200) {
        manage.saveFile({
          tempFilePath: res.tempFilePath,
          filePath: wx.env.USER_DATA_PATH + "/待派单明细.xlsx",  // 文件重命名 可自定义
          success: function(res) {
          }
        });
        // 打开文档
        wx.openDocument({
          filePath: wx.env.USER_DATA_PATH + "/待派单明细.xlsx",
          success: function(res) {
            console.log('打开文档成功')
          },
          fail: function() {
            console.log('打开失败');
          }
        })
      }
    },
    fail(err) {
      console.log('downloadfile err', err)
    }
  })
}

这样就实现啦! 下面是我实现时踩过得坑 导出函数不变,download函数内容不同。思路是:获取字节流 -- writeFile() -- wx.openDocument() 这个思路只能在微信开发者工具pc端上实现,在真机上压根不执行wx.downloadFile并且会报错"protocol"

// 查看导出返回的字节流
download(fileName) {
  let token = wx.getStorageSync('token');
  wx.request({
    url: commonTool.baseUrl + "mall/myShop/common/download?delete=true&fileName=" + fileName,
    header: {
      "content-type": "application/json",
      "token": token
    },
    responseType: "arraybuffer", //注意这里的responseType
    success: res => {
      console.log('获取字节流', res);
      var fileManager = wx.getFileSystemManager();
      var FilePath = wx.env.USER_DATA_PATH + "/" + fileName;
      fileManager.writeFile({
        data: res.data,
        filePath: FilePath,
        encoding: "binary", //编码方式 
        success: result => {
          console.log('FilePath',FilePath)  // FilePath为 wxfile://***
          wx.downloadFile({
            url: FilePath, // download的url必须为http或https链接
            header: {
               "content-type": "application/json",
               "token": token
            },
            success(res) {
              // 打开文档
              wx.openDocument({ //我这里成功之后直接打开
                filePath: res.tempFilePath,
                fileType: "xlsx",
                success: result => {
                  console.log('打开文件', result);
                },
                fail: result => {
                  console.log(result);
                }
             });
          },
          fail: res => {
            console.log(res);
          }
       })
     }
  })
}

希望能对正在浏览的你有些许的帮助~程序猿盆友们加油吖!

相关文章

网友评论

    本文标题:微信小程序原生导出excel文件

    本文链接:https://www.haomeiwen.com/subject/ephhsktx.html