快捷導(dǎo)航

使用原生JS將JSON數(shù)組轉(zhuǎn)換為CSV文件的完整代碼

更新時(shí)間：2025年10月30日 08:30:41 作者：技術(shù)小丁

本文介紹了如何在瀏覽器中實(shí)現(xiàn)前端CSV文件下載功能,通過(guò)三個(gè)步驟實(shí)現(xiàn)：準(zhǔn)備數(shù)據(jù)數(shù)組并定義表頭；將數(shù)據(jù)拼接為符合CSV格式的字符串,包含引號(hào)處理；使用Blob對(duì)象創(chuàng)建文件流,通過(guò)隱藏的a標(biāo)簽,需要的朋友可以參考下

一、核心思路

把 JS 數(shù)組拼成「逗號(hào)分隔 + 換行」的字符串 → 這就是 CSV 的“文本協(xié)議”。
利用 Blob 把字符串變成文件流。
創(chuàng)建一個(gè)看不見(jiàn)的 <a> 標(biāo)簽，給它一個(gè) download 屬性，再自動(dòng)點(diǎn)一下，瀏覽器就會(huì)彈出保存框。

二、核心代碼

1. 準(zhǔn)備原始數(shù)據(jù)

原始數(shù)據(jù)可以是接口返回，也可以是 mock。

const posts = [
  { id:1, title:'用 Vite 搭建 React 18 項(xiàng)目', link:'...', img:'...', views:12034 },
  // ...
];

2. 定義表頭

順序隨意，只要和下面 map 對(duì)應(yīng)即可。

const headers = ['id','名稱','鏈接','圖片','閱讀'];

3. 拼接數(shù)據(jù)

const csvContent = [
  headers.join(','), // 第一行：表頭
  ...posts.map(item => [ // 剩余行：數(shù)據(jù)
    `"${item.id}"`,
    `"${item.title}"`,
    `"${item.link}"`,
    `"${item.img}"`,
    `"${item.views}"`
  ].join(','))
].join('\n');

4. 生成文件并下載

const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.href = url;
link.download = `文章信息_${new Date().toISOString()}.csv`;
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);

三、完整代碼

// 1. 造點(diǎn)假數(shù)據(jù)
const posts = [
  {
    id: 1,
    title: '用 Vite 搭建 React 18 項(xiàng)目',
    link: 'https://example.com/vite-react18',
    img: 'https://example.com/cover/vite-react.jpg',
    views: 12034
  },
  {
    id: 2,
    title: 'Tailwind CSS 3 響應(yīng)式布局技巧',
    link: 'https://example.com/tailwind-layout',
    img: 'https://example.com/cover/tailwind.jpg',
    views: 8721
  },
  {
    id: 3,
    title: '深入淺出瀏覽器事件循環(huán)',
    link: 'https://example.com/event-loop',
    img: 'https://example.com/cover/event-loop.jpg',
    views: 15003
  },
  {
    id: 4,
    title: 'Webpack 5 性能優(yōu)化清單',
    link: 'https://example.com/webpack5-optimize',
    img: 'https://example.com/cover/webpack.jpg',
    views: 9855
  },
  {
    id: 5,
    title: '前端圖片懶加載完整方案',
    link: 'https://example.com/lazy-load',
    img: 'https://example.com/cover/lazy-load.jpg',
    views: 6542
  }
];
?
// 2. 組裝 CSV
const headers = ['id', '名稱', '鏈接', '圖片', '閱讀'];
const csvContent = [
  headers.join(','),
  ...posts.map(item => [
    `"${item.id}"`,
    `"${item.title}"`,
    `"${item.link}"`,
    `"${item.img}"`,
    `"${item.views}"`
  ].join(','))
].join('\n');
?
// 3. 下載
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', `文章信息_${new Date().toISOString()}.csv`);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);   // 釋放內(nèi)存