Comprenez d'abord le fichier au format csv,
- CSV est Comma-Separated Values (CSV). Son fichier stocke des données tabulaires (chiffres et texte) sous forme de texte brut. Chaque ligne du fichier est un enregistrement de données.
- Chaque enregistrement est constitué d'un ou plusieurs champs, séparés par des virgules.
- L'utilisation de virgules comme séparateurs de champs est à l'origine du nom de ce format de fichier, car le caractère délimiteur peut également être autre qu'une virgule, parfois appelé valeurs séparées par des caractères.
- Par défaut, les fichiers CSV utilisent des virgules anglaises comme séparateurs de colonnes et des caractères de nouvelle ligne comme séparateurs de lignes.
- Si vous ne fournissez pas de page Web et utilisez uniquement la ligne de commande ou un programme binaire pour générer des données au format CSV, il vous suffit de diviser les segments de données par et les lignes par \n, et de les écrire dans un fichier .csv.
implémentation 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);
}
Exemple d'utilisation
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, "人员信息表");
Le résultat est le suivant :
Remarque : Si le contenu du tableau est délimité par des virgules, veillez à le placer entre guillemets doubles, sinon le contenu de la même cellule sera séparé en plusieurs colonnes lors de l'exportation.