먼저 csv 형식 파일을 이해하고,
- CSV는 쉼표로 구분된 값(CSV)입니다. 해당 파일은 표 형식 데이터(숫자 및 텍스트)를 일반 텍스트 형식으로 저장합니다. 파일의 각 줄은 데이터 기록입니다.
- 각 레코드는 쉼표로 구분된 하나 이상의 필드로 구성됩니다.
- 필드 구분 기호로 쉼표를 사용하는 것에서 이 파일 형식의 이름이 유래되었습니다. 구분 문자는 쉼표가 아닌 다른 것일 수도 있으며 문자로 구분된 값이라고도 부르기 때문입니다.
- 기본적으로 CSV 파일은 영어 쉼표를 열 구분 기호로 사용하고 개행 문자를 행 구분 기호로 사용합니다.
- 웹 페이지를 제공하지 않고 명령줄이나 바이너리 프로그램만 사용하여 데이터를 CSV로 출력하는 경우 데이터 세그먼트를 로 분할하고 행을 \n으로 분할하여 .csv 파일에 쓰기만 하면 됩니다.
JS 구현
/**
* @description 纯前端实现将表格数据导出为csv格式文件
* @param {Array} headers 表格头配置项，headers中的key值与data中每一个item的属性名一一对应
* @param {Array} data 表格数据
* @param {String} fileName 导出的文件名称
*/
function downloadCsv(header, data, fileName = "导出结果.csv") {
if (!header || !data|| !Array.isArray(header) || !Array.isArray(data) || !header.length || !data.length) {
return;
}
var csvContent = 'data:text/csv;charset=utf-8,\ufeff';
const _header = header.map(h => h.title).join(",");
const keys = header.map(item => item.key);
csvContent += _header + '\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(/,$/, '\n') : dataString.replace(/,$/, '');
});
const a = document.createElement('a');
a.href = encodeURI(csvContent);
a.download = fileName;
a.click();
window.URL.revokeObjectURL(csvContent);
}
사용예
let header = [
{
key: "order", title: "序号" },
{
key: "name", title: "姓名" },
{
key: "age", title: "年龄" },
{
key: "height", title: "身高" },
{
key: "address", title: "地址" },
],
data = [
{
order: 1,
name: "Abby",
age: 23,
height: 168,
address: "北京，中关村",
},
{
order: 2,
name: "Leo",
age: 28,
height: 183,
address: "上海，陆家嘴",
},
{
order: 3,
name: "Alen",
age: 35,
height: 178,
address: "深圳，南山区",
},
{
order: 4,
name: "Daisy",
age: 27,
height: 160,
address: "广州，天河区",
},
];
downloadCsv(header, data, "人员信息表");
결과는 다음과 같습니다.
참고: 테이블 내용이 쉼표로 구분된 경우 내용을 큰따옴표로 묶어야 합니다. 그렇지 않으면 내보내는 동안 동일한 셀의 내용이 여러 열로 분리됩니다.