admin 管理员组

文章数量: 1184232

前端导出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(",");//分列使用 ， 号分割， 分行用 \ncsvContent += 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].StoragePathconst time = v.FaceAppearTime ||  "";const name = v.ApeName || "";var arr = [img, time, name];theadData.push(arr);}//最终的数据应该是二维数组,数组中每个元素代表每一行exportExcel(theadData);},

本文标签： 前端导出excel文件兼容IE chrome

版权声明：本文标题：前端导出excel文件兼容IE,Chrome 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1699284224a340347.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。