后端不提供文件流接口,前台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("下载成功");

  }

效果截图:

相关推荐
你怎么知道我是队长16 分钟前
python---eval函数
开发语言·javascript·python
溟洵18 分钟前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户25191624271123 分钟前
Canvas之图像合成
前端·javascript·canvas
每天开心23 分钟前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
超凌24 分钟前
el-input-number出现的点击+-按钮频现不生效
前端
UrbanJazzerati25 分钟前
Excel 函数 `SUBSTITUTE` 用法详解:替换文本中的字符
excel
三小河25 分钟前
contentEditable 实现可编辑区域
前端
一道雷33 分钟前
🧩 Vue Router嵌套路由新范式:无需嵌套 RouterView 的布局实践
前端·vue.js
Mintopia37 分钟前
🎯 光与面的命运交锋:Möller-Trumbore 线段三角形相交算法全解析
前端·javascript·计算机图形学
Ares-Wang44 分钟前
Vue》》@ 用法
前端·javascript·vue.js