【前端篇】如何使用纯js导出Excel+export2Excel.js的图片导出(包教包会)

（csv后缀的简单业务实现）前台导出Excel比后台导出Excel要简单很多，话不多说，咱们之间上代码！！！

Excel表格下载2

$scope.downLoadExcel = function(item){
//这里循环主要是导出指定的字段，不需要的话就直接把集合扔进来用就行
var list=[];
$.each(item,function(i,obj){
var all={};
all["id"]=i+1;
all["createTime"]=obj.createTime;
list.push(all)
})	

//列标题，逗号隔开，每一个逗号就是隔开一个单元格
let str = `编号,创建时间\n`;
//增加\t为了不让表格显示科学计数法或者其他格式
for(let i = 0 ; i < list.length ; i++ ){//同上list,可直接传入后台的参数名
for(let item in list[i]){//同上list,可直接传入后台的参数名
str+=`${list[i][item] + '\t'},`; //同上list,可直接传入后台的参数名    
}
str+='\n';
}
//encodeURIComponent解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//通过创建a标签实现
var link = document.createElement("a");
link.href = uri;
//对下载的文件命名
link.download =  "导出.csv";
document.body.appendChild(link);
link.click();

								});

点击下载

然后会弹出下载

打开excel就可以发现我们的数据了

 

如果有需要导出图片的话可以参考 https://blog.csdn.net/xiaoxiaojie12321/article/details/81780900非常简单，方便实用

不过在此处还是把他的代码贴出来；减少大家时间

export2Excel.js的代码 

/* eslint-disable */
let idTmr;
const getExplorer = () => {
  let explorer = window.navigator.userAgent;
  //ie
  if (explorer.indexOf("MSIE") >= 0) {
    return 'ie';
  }
  //firefox
 
  else if (explorer.indexOf("Firefox") >= 0) {
    return 'Firefox';
  }
  //Chrome
  else if (explorer.indexOf("Chrome") >= 0) {
    return 'Chrome';
  }
  //Opera
  else if (explorer.indexOf("Opera") >= 0) {
    return 'Opera';
  }
  //Safari
  else if (explorer.indexOf("Safari") >= 0) {
    return 'Safari';
  }
}
// 判断浏览器是否为IE
const exportToExcel = (data,name) => {
 
  // 判断是否为IE
  if (getExplorer() == 'ie') {
    tableToIE(data, name)
  } else {
    tableToNotIE(data,name)
  }
}
 
const Cleanup = () => {
  window.clearInterval(idTmr);
}
 
// ie浏览器下执行
const tableToIE = (data, name) => {
  let curTbl = data;
  let oXL = new ActiveXObject("Excel.Application");
 
  //创建AX对象excel
  let oWB = oXL.Workbooks.Add();
  //获取workbook对象
  let xlsheet = oWB.Worksheets(1);
  //激活当前sheet
  let sel = document.body.createTextRange();
  sel.moveToElementText(curTbl);
  //把表格中的内容移到TextRange中
  sel.select;
  //全选TextRange中内容
  sel.execCommand("Copy");
  //复制TextRange中内容
  xlsheet.Paste();
  //粘贴到活动的EXCEL中
 
  oXL.Visible = true;
  //设置excel可见属性
 
  try {
    let fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
  } catch (e) {
    print("Nested catch caught " + e);
  } finally {
    oWB.SaveAs(fname);
 
    oWB.Close(savechanges = false);
    //xls.visible = false;
    oXL.Quit();
    oXL = null;
    // 结束excel进程，退出完成
    window.setInterval("Cleanup();", 1);
    idTmr = window.setInterval("Cleanup();", 1);
  }
}
 
// 非ie浏览器下执行
const tableToNotIE = (function() {
  // 编码要用utf-8不然默认gbk会出现中文乱码
  let uri = 'data:application/vnd.ms-excel;base64,',
    template = '{table}',
    base64 = function(s) {
      return window.btoa(unescape(encodeURIComponent(s)));
 
    },
 
    format = (s, c) => {
      return s.replace(/{(\w+)}/g,
        (m, p) => {
          return c[p];
        })
    }
  return (table, name) => {
    let ctx = {
      worksheet: name,
      table
    }
 
    //创建下载
    let link = document.createElement('a');
    link.setAttribute('href', uri + base64(format(template, ctx)));
 
    link.setAttribute('download', name);
 
 
    // window.location.href = uri + base64(format(template, ctx))
    link.click();
  }
})()
 
// 导出函数
const export2Excel = (theadData, tbodyData, dataname) => {
 
  let re = /http/ // 字符串中包含http,则默认为图片地址
  let th_len = theadData.length // 表头的长度
  let tb_len = tbodyData.length // 记录条数
  let width = 40 // 设置图片大小
  let height = 60
 
  // 添加表头信息
  let thead = ''
  for (let i = 0; i < th_len; i++) {
    thead += '' + theadData[i] + ''
  }
  thead += ''
 
  // 添加每一行数据
  let tbody = ''
  for (let i = 0; i < tb_len; i++) {
    tbody += ''
    let row = tbodyData[i] // 获取每一行数据
 
    for (let key in row) {
      if (re.test(row[key])) { // 如果为图片，则需要加div包住图片
        // 
        tbody += '
'
      } else {
        tbody += '' + row[key] + ''
      }
    }
    tbody += ''
  }
  tbody += ''
 
  let table = thead + tbody
 
  // 导出表格
  exportToExcel(table, dataname)
}

最终展示效果