XLS：二进制文件只能用Excel打开
CSV: csv是文本文件比较通用
XLS（二进制可以打开图片，视频等）
function tableToExcel(){
//要导出的json数据
const jsonData = [
{name:'路人甲',phone:'123456',email:'123@123456.com'},
{name:'炮灰乙', phone:'123456',email:'123@123456.com'},
{name:'土匪丙',phone:'123456',email:'123@123456.com'},
{name:'流氓丁',phone:'123456',email:'123@123456.com'},
]
let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
for(let i = 0 ; i < jsonData.length ; i++ ){
str+='<tr>';
for(let item in jsonData[i]){
//增加\t为了不让表格显示科学计数法或者其他格式
str+=`<td>${ jsonData[i][item] + '\t'}</td>`;
}
str+='</tr>';
}
let uri = 'data:application/vnd.ms-excel;base64,';
//下载的表格模板数据
let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head><meta charset='UTF-8'><!--[if gte mso 9]>
<xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>Sheet1</x:Name>
<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
<table>${str}</table></head></html>`;
window.location.href = uri + base64(template)
}
function base64 (s) {
return window.btoa(unescape(encodeURIComponent(s)))
}
//btoa和atob来进行Base64转码和解码
CSV（文本格式）
function tableToExcel(){
const jsonData = [
{name:'路人甲',phone:'123456789',email:'000@123456.com'},
{name:'炮灰乙',phone:'123456789',email:'000@123456.com'},
{name:'土匪丙',phone:'123456789',email:'000@123456.com'},
{name:'流氓丁',phone:'123456789',email:'000@123456.com'},
]
//列标题，逗号隔开，每一个逗号就是隔开一个单元格
let str = `姓名,电话,邮箱\n`;
//增加\t为了不让表格显示科学计数法或者其他格式
for(let i = 0 ; i < jsonData.length ; i++ ){
for(let item in jsonData[i]){
str+=`${jsonData[i][item] + '\t'},`;
}
str+='\n';
}
str+=`<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608,2848974022&fm=26&gp=0.jpg"/>`
//encodeURIComponent解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//通过创建a标签实现
let link = document.createElement("a");
link.href = uri;
//对下载的文件命名
link.download = "json数据表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
网友评论