后端不提供文件流接口,前台js使用a标签实现当前表格数据(数组非blob数据)下载成Excel

前言:开发过程中遇到的一些业务场景,如果第三方不让使用,后端不提供接口,就只能拿到table数据(Array),实现excel文件下载。

废话不多说,直接上代码,方法后续自行封装即可:

java 复制代码
function downLoadExcel(){
    console.log("下载excel");
    var table = [
    {index:"1",name:"Jerry",username:"杰瑞1",father:"你爸爸"},
    {index:"2",name:"Jerry",username:"杰瑞2",father:"你爸爸"},
    {index:"3",name:"Jerry",username:"杰瑞3",father:"你爸爸"},
    {index:"4",name:"Jerry",username:"杰瑞4",father:"你爸爸"},
    {index:"5",name:"Jerry",username:"杰瑞5",father:"你爸爸"},
    {index:"6",name:"Jerry",username:"杰瑞6",father:"你爸爸"},
    {index:"7",name:"Jerry",username:"杰瑞7",father:"你爸爸"},
    {index:"8",name:"Jerry",username:"杰瑞8",father:"你爸爸"},
    {index:"9",name:"Jerry",username:"杰瑞9",father:"你爸爸"},
    {index:"10",name:"Jerry",username:"杰瑞10",father:"你爸爸"},
    {index:"11",name:"Jerry",username:"杰瑞11",father:"你爸爸"},
    {index:"12",name:"Jerry",username:"杰瑞11",father:""},
    ]
    console.log("长度",table.length)
    console.log("数据源是什么1",JSON.parse(JSON.stringify(table)))
    let JSONData = JSON.parse(JSON.stringify(table));
    let ShowLabel = ['序号', '英文名', '中文名','父亲','母亲','儿子','孙子','外公','外婆'];
    //先转化json
    let arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
    console.log("数据源是什么",arrData)
    // 给数组内容换好位置
    arrData.forEach(item => {
      let obj = {
        index: item.index,
        name: item.name ? item.name : '',
        username: item.username,
        father:item.father?item.father:'',
      };
      table.push(obj);
    });
    let excel = '<table>';
    //设置表头
    let row = '<tr>';
    for (let i = 0; i < ShowLabel.length; i++) {
      row += '<td>' + ShowLabel[i] + '</td>';
    }
    //换行
    excel += row + '</tr>';
    //设置数据
    for (let i = 0; i < (table.length)/2; i++) {
      console.log("遍历了"+i+"次")
      let row = '<tr>';
      for (let index in table[i]) {
        let value = table[i][index];
        if (index === 'imei') {
          // 当数字超过一定长度就科学计数法可以使用style='mso-number-format:"\@"'
          // 这个属性指定某单元格的数据格式,避免Excel自动转换格式
          row += `<td style='mso-number-format:\"\\@\"'>${value}</td>`;
        } else {
          row += '<td>' + value + '</td>';
        }
      }
      excel += row + '</tr>';
    }
    excel += '</table>';
    let excelFile =
      "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
    excelFile +=
      '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
    excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
    excelFile += '; charset=UTF-8">';
    excelFile += '<head>';
    excelFile += '<!--[if gte mso 9]>';
    excelFile += '<xml>';
    excelFile += '<x:ExcelWorkbook>';
    excelFile += '<x:ExcelWorksheets>';
    excelFile += '<x:ExcelWorksheet>';
    excelFile += '<x:Name>';
    excelFile += '{worksheet}';
    excelFile += '</x:Name>';
    excelFile += '<x:WorksheetOptions>';
    excelFile += '<x:DisplayGridlines/>';
    excelFile += '</x:WorksheetOptions>';
    excelFile += '</x:ExcelWorksheet>';
    excelFile += '</x:ExcelWorksheets>';
    excelFile += '</x:ExcelWorkbook>';
    excelFile += '</xml>';
    excelFile += '<![endif]-->';
    excelFile += '</head>';
    excelFile += '<body>';
    excelFile += excel;
    excelFile += '</body>';
    excelFile += '</html>';
    let uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
    let link = document.createElement('a');
    link.href = uri;
    link.style = 'visibility:hidden';
    link.download = '表格下载.xls';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    console.log("下载成功");

  }

效果截图:

相关推荐
然我几秒前
从原生 JS 到 React:手把手带你开启 React 业务开发之旅
javascript·react.js·前端框架
import_random2 分钟前
[机器学习]svm支持向量机(优势在哪里)
前端
国家不保护废物3 分钟前
从刀耕火种到现代框架:DOM编程 vs Vue/React 进化史
前端·vue.js·react.js
陈随易3 分钟前
Univer v0.8.0 发布,开源免费版 Google Sheets
前端·后端·程序员
wkj0018 分钟前
QuaggaJS 配置参数详解
java·linux·服务器·javascript·quaggajs
不怎么爱学习的dan9 分钟前
实现 ECharts 多国地区可视化方案
前端
嘉小华9 分钟前
Android Lifecycle 状态同步与分发机制深度解析
前端
李三岁_foucsli15 分钟前
chrome架构-多进程和进程中的线程
前端·google
阿琳a_19 分钟前
前端对WebSocket进行封装,并建立心跳监测
前端·javascript·vue.js·websocket
Am1nnn24 分钟前
【Pinia】Pinia和Vuex对比
前端·javascript·vue.js