前端导出excel文件兼容IE,Chrome

前端导出excel文件兼容IE,Chrome

导出文件，使用最多的方式还是服务器端来处理,但是有时候需要web端来导出一个表格,
思路
1.导出文件的格式data:text/csv;charset=utf-8,IE上加上BOM头\ufeff 防止乱码
2.表格数据以,分列 \n分行
3.使用encodeURI转换成可以识别的url,IE上加上decodeURIComponent转换这个url
话不多说直接上代码

//导出csv文件
export const exportExcel = data => {
  var csvContent = "data:text/csv;charset=utf-8,";
  if (window.navigator.msSaveOrOpenBlob) {
    // 加上 \ufeff BOM 头,防止乱码
    csvContent = "\ufeff";
  }
  //csv 文件可以用Excel打开， 如果是导出一个table 的话，使用Excel 就方便很多了
  data.forEach(function(infoArray, index) {
    var dataString = infoArray.join(",");
    //分列使用 ， 号分割， 分行用 \n
    csvContent += index < data.length ? dataString + "\n" : dataString;
  });
  exportFun(csvContent);
};
const exportFun = csvContent => {
  if (window.navigator.msSaveOrOpenBlob) {
    // IE 浏览器  \n.使用后会发现列可以分开，但是不换行。 看上去不认识 使用decodeURIComponent 进行编码
    var blob = new window.Blob([decodeURIComponent(encodeURI(csvContent))], {
      type: "text/csv;charset=utf-8;"
    });
    //Internet Explorer 10 的 msSaveBlob 和 msSaveOrOpenBlob 方法允许用户在客户端上保存文件,名字随便起
    navigator.msSaveBlob(blob, "download.csv");
  } else {
    //非IE浏览器直接使用a标签download下载
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "download.csv");
    document.body.appendChild(link);
    link.click();
  }
};
 //造数据
 exportExcel() {
     //表头
     let theadData = [["抓拍图片", "时间", "设备名称"]],
     //表格内容,列数必须和表偷数据一致
     for (var v of this.snpaShotData_notype) {
       const img =v.SubImageList[0].StoragePath
       const time = v.FaceAppearTime ||  "";
       const name = v.ApeName || "";
       var arr = [img, time, name];
       theadData.push(arr);
     }
     //最终的数据应该是二维数组,数组中每个元素代表每一行
     exportExcel(theadData);
   },