blob开头的文件下载_前端如何导出Excel（CSV）文件

有时候需要把一些数据导出到一个 Excel 文件中&＃xff0c;并下载。遇到这个问题&＃xff0c;其实能够直接导出一个 CSV(Comma-Separated Values) 文件即可。CSV 是一种以纯文本方式存储的表格文件&＃xff0c;每个单元格数据以逗号分割&＃xff0c;每行通过换行符分割&＃xff0c;类似这种形式&＃xff1a;

name,age,from\nsuyan,20,beijing\nlefex,30,baotou\n

所以&＃xff0c;如果把一些数据导出到文件只要转换成这种数据格式即可。

{
    header: ["name", "age", "from"],
    data: [
        {
            name: "suyan",
            age: "23",
            from: &＃39;beijing&＃39;
        },
        {
            name: "lefex",
            age: "30",
            from: &＃39;baotou&＃39;
        }
    ]
}
把这个对象转换成 CSV 字符串&＃xff0c;代码如下&＃xff1a;

function exportToCSVFile(obj) { let header &＃61; obj.header.join(&＃39;,&＃39;) &＃43; &＃39;\n&＃39;; let datas &＃61; obj.data.map(ele &＃61;> { return &＃96;${ele.name},${ele.age},${ele.from}\n&＃96;; }); let dataStrs &＃61; [header, ...datas].join(&＃39;&＃39;); }

把字符串导出文件&＃xff0c;可以使用 Blob 对象&＃xff0c;通过 Blob 对象生成一个 URL&＃xff0c;然后创建一个 a 标签&＃xff0c;达到下载文件的目的。代码中的 \uFEFF 是一个文件头&＃xff0c;表示文件的编码&＃xff0c;不加这个头&＃xff0c;通过某些软件打开时可能会发生乱码。 

// 创建一个 Blob 对象const blob &＃61; new Blob([&＃39;\uFEFF&＃39; &＃43; dataStrs], {   type: &＃39;text/plain;charset&＃61;utf-8&＃39;, });

创建一个 a 标签&＃xff0c;每行代码我都详细写了注释&＃xff1a;

// 创建一个 a 标签const link &＃61; document.createElement("a");// 一个 URL&＃xff0c;可以是任意协议的&＃xff0c;不只是 HTTP 协议// 这里创建了一个 Blob URL// blob:http://localhost:1234/9b3be48e-9948-496d-8a2b-18d437eb46e0link.href &＃61; URL.createObjectURL(blob);console.log(link.href);// 此属性表示用户下载文件而不是进行导航到 URL&＃xff0c;这里指的为文件名link.download &＃61; "suyan.csv";link.click();// 需要释放 URLURL.revokeObjectURL(link.href);

完整代码如下&＃xff1a;

function exportToCSVFile(obj) {
    let header &＃61; obj.header.join(&＃39;,&＃39;) &＃43; &＃39;\n&＃39;;
    let datas &＃61; obj.data.map(ele &＃61;> {
        return &＃96;${ele.name},${ele.age},${ele.from}\n&＃96;;
    });
    let dataStrs &＃61; [header, ...datas].join(&＃39;&＃39;);
    // 创建一个 Blob 对象
    const blob &＃61; new Blob([&＃39;\uFEFF&＃39; &＃43; dataStrs], {
        type: &＃39;text/plain;charset&＃61;utf-8&＃39;,
    });
    // 创建一个 a 标签
    const link &＃61; document.createElement("a");
    // 一个 URL&＃xff0c;可以是任意协议的&＃xff0c;不只是 HTTP 协议
    // 这里创建了一个 Blob URL
    // blob:http://localhost:1234/9b3be48e-9948-496d-8a2b-18d437eb46e0
    link.href &＃61; URL.createObjectURL(blob);
    console.log(link.href);

    // 此属性表示用户下载文件而不是进行导航到 URL&＃xff0c;这里指的为文件名
    link.download &＃61; "suyan.csv";
    link.click();
    // 需要释放 URL
    URL.revokeObjectURL(link.href);
}
本节内容主要学习了 CSV 文件格式&＃xff0c;Blob 对象&＃xff0c;Blob URL&＃xff0c;通过 JS 代码下载文件。大家加油&＃xff01;

长按关注

帮助 10W 人入门并进阶前端