前端如何導出 Excel(CSV)文件

有時候需要把一些數據導出到一個 Excel 文件中，並下載。遇到這個問題，其實能夠直接導出一個 CSV（Comma-Separated Values） 文件即可。CSV 是一種以純文本方式存儲的表格文件，每個單元格數據以逗號分割，每行通過換行符分割，類似這種形式：

name,age,from\nsuyan,20,beijing\nlefex,30,baotou\n
所以，如果把一些數據導出到文件只要轉換成這種數據格式即可。
{
    header: ["name", "age", "from"],
    data: [
        {
            name: "suyan",
            age: "23",
            from: 'beijing'
        },
        {
            name: "lefex",
            age: "30",
            from: 'baotou'
        }
    ]
}
function exportToCSVFile(obj) {    let header = obj.header.join(',') + '\n';    let datas = obj.data.map(ele => {        return `${ele.name},${ele.age},${ele.from}\n`;    });    let dataStrs = [header, ...datas].join(''); }
把字符串導出文件，可以使用 Blob 對象，通過 Blob 對象生成一個 URL，然後創建一個 a 標籤，達到下載文件的目的。代碼中的 \uFEFF 是一個文件頭，表示文件的編碼，不加這個頭，通過某些軟體打開時可能會發生亂碼。 
 const blob = new Blob(['\uFEFF' + dataStrs], {   type: 'text/plain;charset=utf-8', });
創建一個 a 標籤，每行代碼我都詳細寫了注釋：
const link = document.createElement("a");link.href = URL.createObjectURL(blob);console.log(link.href);
link.download = "suyan.csv";link.click();URL.revokeObjectURL(link.href);
完整代碼如下：
function exportToCSVFile(obj) {
    let header = obj.header.join(',') + '\n';
    let datas = obj.data.map(ele => {
        return `${ele.name},${ele.age},${ele.from}\n`;
    });
    let dataStrs = [header, ...datas].join('');
    // 創建一個 Blob 對象
    const blob = new Blob(['\uFEFF' + dataStrs], {
        type: 'text/plain;charset=utf-8',
    });
    // 創建一個 a 標籤
    const link = document.createElement("a");
    // 一個 URL，可以是任意協議的，不只是 HTTP 協議
    // 這裡創建了一個 Blob URL
    // blob:http://localhost:1234/9b3be48e-9948-496d-8a2b-18d437eb46e0
    link.href = URL.createObjectURL(blob);
    console.log(link.href);

    // 此屬性表示用戶下載文件而不是進行導航到 URL，這裡指的為文件名
    link.download = "suyan.csv";
    link.click();
    // 需要釋放 URL
    URL.revokeObjectURL(link.href);
}
本節內容主要學習了 CSV 文件格式，Blob 對象，Blob URL，通過 JS 代碼下載文件。大家加油！
長按關注
幫助 10W 人入門並進階前端