CSV格式的表格下载（自定义表头以及表格title）

最新推荐文章于 2025-04-16 10:12:12 发布

原创最新推荐文章于 2025-04-16 10:12:12 发布 · 761 阅读

0 ·

CC 4.0 BY-SA版权

该段代码展示了如何在JavaScript中动态生成CSV文件并下载，包括设置自定义表头、表格title，以及根据条件筛选和展示数据。通过map函数遍历数据，构建CSV字符串，并利用数据URI下载功能实现文件下载。

CSV格式的表格下载（自定义表头以及表格title）

let str = "";
str = 'VDN List,';
str = `${str}${targetStr},`;      //上面这两行是除了表格之外的额外部分
str+='\n\n';
str = `${str}ECU Name,`;     //下面这几行是表格的title
str = `${str}ECU Address,`;
str = `${str}Serial No,`;
str = `${str}Hardware Part No,`;
str = `${str}Software Part No,`;
str = `${str}Diagnostic Part No,`;
str+='\n';

totalData[0].TypeRelevanceReport.map((it)=>{ //对于表格数据进行筛选展示
if(it.softwareReport.length>0){
it.softwareReport.map((i,index)=>{ //表格有多条数据的展示
str = ${str}${index === 0 && it.name || ''} ,
str = ${str}${index === 0 && it.address || ''} ,
str = ${str}${index === 0 && it.hardwareSerialNumber || ''} ,
str = ${str}${(index === 0 && it.hardwarePartNumber || '') + (index === 0 && it.hardwarePartVersion || '')} ,
str = ${str}${(i.partType || '') + (i.partNum || '') + (i.version || '')}${' '}${(i.msg || '')} ,
str = ${str}${(index === 0 && it.diagnosticPartNumber || '') + (index === 0 && it.diagnosticPartVersion || '')} ,
str+=’\n’;
return false;
})
}else{ //表格只有一条数据的展示
str = ${str}${it.name || ''} ,
str = ${str}${it.address || ''} ,
str = ${str}${it.hardwareSerialNumber || ''} ,
str = ${str}${(it.hardwarePartNumber || '') + (it.hardwarePartVersion || '')} ,
str = ${str}${''} ,
str = ${str}${(it.diagnosticPartNumber || '') + (it.diagnosticPartVersion || '')} ,
str+=’\n’;
}
return false
});
const url = data:text/csv;charset=utf-8,\ufeff${ encodeURIComponent(str) };
const link = document.createElement(‘a’);
link.href = url;
link.download = json下载.csv;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
return false;