关于javascript:前端导出excel文件兼容IEChrome

31次阅读

共计 1431 个字符，预计需要花费 4 分钟才能阅读完成。

导出文件，应用最多的形式还是服务器端来解决, 然而有时候须要 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);
   },

正文完