关于后端返回的base64编码，前端实现excel表格导出

最新推荐文章于 2024-07-12 16:27:40 发布

眼中雾

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量1.5k

点赞数 2

文章标签：前端 excel javascript

本文链接：https://blog.csdn.net/weixin_45954050/article/details/132424254

版权

在PC后台管理系统中，经常会有一些表格页需要去做excel导出操作。例如：

刚开始碰到这个我也特别纳闷，这后端接口就返回了base64编码怎么去实现？因为没接触过，我就去百度、问组长。最后理清了思路，其实也简单，也就是三个步骤，当然我说的也是其中的一种方法。如下(上代码)：

在进行接下来的一系列操作之前，我们现需要拿到后端给返回的base64编码

// 导出
    exportBase64Excel() {
      this.request("/osl/inner/api/xx/xxx/xxx"),
        {
          method: "POST",
          data: {
            // 接口需要上送的数据
          },
          success: (res) => {
            // 先接受返回的base64数据
            let baseData = res?.excelFile || "";
            let binaryData = this.baseToBinary(baseData);
            let excelBlob = this.createExcelBlob(binaryData);
            this.downloadExcel(excelBlob, "export_pay_statement.xlsx");
          },
        };
    },

1.首先，将base64编码解码为二进制数据；

baseToBinary() {
      // window.atob()用于解码使用base64编码的字符串
      let binaryString = window.atob(baseData);
      let binaryLen = binaryString.length;
      let bytes = new Uint8Array(binaryLen);
      for (var i = 0; i < binaryLen; i++) {
        // charCodeAt()用于返回指定位置处字符的Unicode编码
        let ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
      }
      return bytes;
    },

2.创建一个blob对象，将解码后的二进制数据转换为Blob对象，Blob对象表示二进制数据，并且可以用于在前端进行展示、下载或其他操作；

createExcelBlob(binaryData) {
      const blob = new Blob([binaryData], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      });
      return blob;
    },

3.生成一个下载链接。并在页面上创建一个a标签，并将其href属性设置为Blob对象的URL，使其可供下载。

downloadExcel(blob, fileName) {
      // 创建一个新的a标签元素
      let a = document.createElement("a");
      // 创建一个表示指定对象的url
      a.href = URl.createObjectURL(blob);
      a.download = fileName;
      // 将指定元素添加到<body>元素
      document.body.appendChild(a);
      a.click();
      // 从<body>元素中移除指定子元素
      document.body.removeChild(a);
    },

以上是方便熟悉代码进行的分步操作加解析，在日常的开发中，我们更倾向于将这种在项目中会多次用到的方法封装在utils.js中，更便捷使用。如下：

// baseData为接口返回base64编码，fileName为文件名
downloadBase64Excel(baseData, fileName) {
      let binaryString = window.atob(baseData);
      let binaryLen = binaryString.length;
      let bytes = new Uint8Array(binaryLen);
      for (var i = 0; i < binaryLen; i++) {
        bytes[i] = binaryString.charCodeAt(i);
      }
      let excelBlob = new Blob([binaryData], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      });
      let a = document.createElement("a");
      a.href = URl.createObjectURL(excelBlob);
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },