ie导出excel是html文件路径,前端导出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);

},