js导出csv

一、普能导出

function generateCSV(data) {
  let csv = 'id,名称,年龄\n'; // 表头

  data.forEach(item => {
    csv += `${item.id},${item.name},${item.age}\n`; // 每行数据,使用逗号作为分隔符
  });

  return csv;
}

const data = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Bob', age: 40 }
];

const csvContent = generateCSV(data);

// 创建并下载文件
const filename = 'data.csv';
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) {
  // 兼容IE
  navigator.msSaveBlob(blob, filename);
} else {
  const link = document.createElement('a');
  if (link.download !== undefined) {
    // 使用download属性,支持大多数浏览器
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', filename);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}

二、字段值包含逗号

function generateCSV(data) {
  let csv = 'id,name,age\n'; // 表头

  data.forEach(item => {
    const { id, name, age } = item;
    const csvLine = `${id},"${name}",${age}\n`; // 使用引号将字段值包裹起来
    csv += csvLine;
  });

  return csv;
}

const data = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Jane, Doe', age: 25 }, // 示例中的 name 包含逗号
  { id: 3, name: 'Bob', age: 40 }
];

const csvContent = generateCSV(data);

三、字段值包含JSON字符串

function generateCSV(data) {
  let csv = 'id,name,jsonData\n'; // 表头

  data.forEach(item => {
    const { id, name, jsonData } = item;

    // 将 JSON 字符串转义并用双引号括起来
    const escapedJSON = JSON.stringify(jsonData).replace(/"/g, '""');

    const csvLine = `${id},"${name}","${escapedJSON}"\n`;
    csv += csvLine;
  });

  return csv;
}

const data = [
  { id: 1, name: 'John', jsonData: '{"age": 30, "city": "New York"}' },
  { id: 2, name: 'Jane', jsonData: '{"age": 25, "city": "San Francisco"}' },
  { id: 3, name: 'Bob', jsonData: '{"age": 40, "city": "London"}' }
];

const csvContent = generateCSV(data);
PS:写作不易,如要转裁,请标明转载出处。
%{ comment.page.total }条评论

猜你想看

微信小程序:前端开发宝典

最近文章
工具操作
  • 内容截图
  • 全屏
登录
注册
回顶部