纯前端下载 csv 文件
table 数据
data() {
return {
header: [
{
_id: '01',
label: '姓名',
prop: 'name',
},
{
_id: '02',
label: '电话',
prop: 'tel',
},
{
_id: '03',
label: '邮箱',
prop: 'email',
}
]
tableData: [
{
name: 'jack',
tel: '0000-000000',
email: 'jack@xx.com'
},
{
name: 'mark',
tel: '0000-111111',
email: 'mark@xx.com'
}
]
}
}
下载 csv 文件函数
function downloadCsv(header, data, fileName = "导出结果.csv") {
if (!header || !data|| !Array.isArray(header) || !Array.isArray(data) || !header.length || !data.length) {
return;
}
// 下面 blob 位置指定了文件格式,在此处就不需要再指定了
// var csvContent = '';
var csvContent = 'data:text/csv;charset=utf-8,\ufeff';
const _header = header.map(h => h.label).join(",");
const keys = header.map(item => item.prop);
csvContent += _header + '\r\n';
data.forEach((item, index) => {
let dataString = '';
for (let i = 0; i < keys.length; i++) {
dataString += item[keys[i]] + ','
}
csvContent += index < data.length ? dataString.replace(/,$/, '\r\n') : dataString.replace(/,$/, '');
});
// 使用编码转换包
// import Encoding from 'encoding-japanese'
// 安装:npm i encoding-japanese
// const unicodeArray = Encoding.stringToCode(csvContent)
// const sjisArray = Encoding.convert(unicodeArray, {
// to: 'SJIS',
// from: 'UNICODE'
// })
// const UintArray = new Uint8Array(sjisArray);
// const blobUrl = new Blob([UintArray], {type: 'text/csv'});
// console.log(csvContent);
const a = document.createElement('a');
a.href = URL.createObjectURL(csvContent);
a.download = fileName;
a.click();
window.URL.revokeObjectURL(csvContent);
}
结果