微信小程序 h5下载xlsx 文件

出于对数据安全的考虑,查询到的表格数据是以base64数据形式返回给到前端,需要前端自行解析处理。如果直接返回www.xxx.xx/aa.xlsx 这种形式就会容易很多。

案例: 如下body字段的数据,就是表格的数据,对其进行展示。

1.jpg

base64形式的文件下载处理

微信小程序处理
  • 利用wx.base64ToArrayBuffer(data) 将base64 数据转成ArrayBuffer
  • getFileSystemManager 把数据写入到本地(writeFile)
  • 利用wx.openDocument 打开生成的文件即可。
  const fileReg = /\.pdf$|\.xlsx$|\.doc$|\.docx$|\.xls$/i;
  filename = filename.trim();
  if (!fileReg.test(filename)) {
    toast("warn 需要设置文件格式,默认打开xlsx");
    filename = `${filename}.xlsx`;
  }
  const _fsm = wx.getFileSystemManager();
  _fsm &&
    _fsm.writeFile({
      filePath: `${wx.env.USER_DATA_PATH}/${filename}`,
      data: wx.base64ToArrayBuffer(base64Data),
      encoding: "utf8",
      success: function(e) {
        wx.openDocument({
          filePath: `${wx.env.USER_DATA_PATH}/${filename}`,
          showMenu: true,
          success: function() {},
          fail: function() {
            toast("文件打开失败");
          },
        });
      },
      fail: function(e) {
        console.log(e);
        if (e && e.errMsg) {
          toast((e && e.errMsg) || "文件写入失败");
        }
      },
      complete: function() {},
    });
h5 处理
  • 将base64转成Blob
  • 利用URL.createObjectURL 生成链接
  • 创建a链接打开
  function _downloadFileH5(content, fileName) {
    let base64ToBlob = function(code) {
      let _base64Data = code;
      let contentType = "text/plain";
      if (code.indexOf(";base64") > -1) {
        let _parts = code.split(";base64,");
        _base64Data = _parts[1];
        contentType = _parts[0].split(":")[1];
      }
      let raw = window.atob(content);
      let rawLength = raw.length;
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], {
        type: contentType,
      });
    };
    let aLink = document.createElement("a");
    let blob = base64ToBlob(content);
    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true); //阻止浏览器的默认行为
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.click();
  }
url形式的文件下载处理

直接downloadFile 即可

function openFile(fileUrl = "", filename = "table.xlsx") {
  // #ifdef H5
  window.location.href = fileUrl;
  // #endif
  // #ifdef MP-WEIXIN
  //处理pdf的后缀名
  const fileReg = /\.pdf$|\.xlsx$|\.doc$|\.docx$|\.xls$/i;
  filename = filename.trim();
  if (!fileReg.test(filename)) {
    toast("warn 需要设置文件格式,默认打开xlsx");
    filename = `${filename}.xlsx`;
  }
  wx.downloadFile({
    url: fileUrl || "https://b.leka.club/table.xlsx",
    filePath: `${wx.env.USER_DATA_PATH}/${filename}`,
    success: function(res) {
      wx.openDocument({
        filePath: res.filePath,
        showMenu: true,
        success: function() {},
        fail: function() {
          toast("文件打开失败");
        },
      });
    },
    fail: function() {
      toast("文件下载失败");
    },
  });
  // #endif
}
朗读
版权属于:

IT帝国

本文链接:

https://www.itdiguo.cn/archives/329.html(转载时请注明本文出处及文章链接)

评论 (0)

最新回复

  1. wq
    2022-05-25
  2. a
    2020-11-11

标签云