如何將 object 轉換為 JavaScript 中的 text/csv 並下載為 CSV？

Question

我正在嘗試將 Object 轉換為 JavaScript 中的 csv 並下載。 我知道下載的邏輯，但我不知道如何轉換Object以便它可以用於這個邏輯。

const tests = [
    {
        id: 1,
        name: 'taro',
        designId: 1,
        designName: 'design1'
    },
    {
        id: 1,
        name: 'taro',
        designId: 2,
        designName: 'design2'
    },
    {
        id: 2,
        name: 'Bob',
        designId: 3,
        designName: 'design3'
    },
    {
        id: 2,
        name: 'Bob',
        designId: 4,
        designName: 'design4'
    },
];

我正在嘗試使用的邏輯。↓

const objToCsv = ""; // Wanted part
const type = 'text/csv';
downLoadLink.download = 'test.csv';
downLoadLink.href = URL.createObjectURL(new Blob([objToCsv], { type }));
downLoadLink.dataset.downloadurl = [type, downLoadLink.download, downLoadLink.href].join(':');
downLoadLink.click();

Answer 1

要在客戶端生成 CSV，您可以使用基本的 JS：

function getCsv(tests) {
    const lines = [];
    for(let item in tests) {
        const line = Object.values(item).map(x => escapeCsvValue(x));
        lines.push(line.join(";"));
    }
    return lines.join("\n");
}

function escapeCsvValue(value) {
    if(!value || value.indexOf(';') === -1)
        return value;

    return '"' + value.replace('"', '""') + '"';
}

這就是您需要轉義 CSV 值的原因：單擊

要導出數據進行保存，您可以使用外部庫，例如FileSaver.js

Answer 2

將 ES Object 轉換為 csv 的簡單方法。使用代碼段中的代碼，例如添加分隔符（ "等）。

 const tests = [ { id: 1, name: 'taro', designId: 1, designName: 'design1' }, { id: 1, name: 'taro', designId: 2, designName: 'design2' }, { id: 2, name: 'Bob', designId: 3, designName: 'design3' }, { id: 2, name: 'Bob', designId: 4, designName: 'design4' }, ]; // create the topline (column headers) let topLine = Object.keys(tests[0]).join(";"); // create lines with values const lines = tests.reduce( (acc, val) => acc.concat( Object.values(val).join(`;`) ), [] ); // concat both strings const csv = topLine.concat(`\n${lines.join(`\n`)}`); console.log(csv);