从javascript对象数组生成csv文件

我知道这是一个已经回答过的问题，但找不到适合我的解决方案

我有一个HTML按钮，当点击它时，它会以typescript（基本上是javascript）生成一个对象数组，我想生成一个csv文件，然后下载

下面是javascript对象数组的示例：

    var items = [
              { "name": "Item 1", "color": "Green", "size": "X-Large" },
              { "name": "Item 2", "color": "Green", "size": "X-Large" },
              { "name": "Item 3", "color": "Green", "size": "X-Large" }];

    // Loop the array of objects
for(let row = 0; row < items.length; row++){
    let keysAmount = Object.keys(items[row]).length
    let keysCounter = 0

    // If this is the first row, generate the headings
    if(row === 0){

       // Loop each property of the object
       for(let key in items[row]){

                           // This is to not add a comma at the last cell
                           // The '\n' adds a new line
           csv += key + (keysCounter+1 < keysAmount ? ',' : '\r\n' )
           keysCounter++
       }
    }else{
       for(let key in items[row]){
           csv += items[row][key] + (keysCounter+1 < keysAmount ? ',' : '\r\n' )
           keysCounter++
       }
    }

    keysCounter = 0
}
console.log(csv)

var hiddenElement = document.createElement('a');
        hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
        hiddenElement.target = '_blank';
        hiddenElement.download = 'people.csv';
        hiddenElement.click();

---

CSV只是一个文件，每个单元格用逗号分隔，每行用新行分隔。您希望将每个列命名为对象的键。如果我理解正确：

{ "name": "Item 1", "color": "Green", "size": "X-Large" }

将是：

---------------------------
| name   | color |   size  |
---------------------------
| Item 1 | Green | X-Large |
---------------------------

更新：这是更新的版本

因此，您可以使用HTML5中的文件API循环数组并相应地生成csv：

let csv

// Loop the array of objects
for(let row = 0; row < items.length; row++){
    let keysAmount = Object.keys(items[row]).length
    let keysCounter = 0

    // If this is the first row, generate the headings
    if(row === 0){

       // Loop each property of the object
       for(let key in items[row]){

                           // This is to not add a comma at the last cell
                           // The '\r\n' adds a new line
           csv += key + (keysCounter+1 < keysAmount ? ',' : '\r\n' )
           keysCounter++
       }
    }else{
       for(let key in items[row]){
           csv += items[row][key] + (keysCounter+1 < keysAmount ? ',' : '\r\n' )
           keysCounter++
       }
    }

    keysCounter = 0
}

// Once we are done looping, download the .csv by creating a link
let link = document.createElement('a')
link.id = 'download-csv'
link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(csv));
link.setAttribute('download', 'yourfiletextgoeshere.csv');
document.body.appendChild(link)
document.querySelector('#download-csv').click()

csv
//循环对象数组
for（让行=0；行

顺便说一句，如果您使用的是TypeScript，那么最后一行是

document.querySelector（'download csv'）。click（）

必须是

document.querySelector（'download csv'）。click（）

让我知道它是否对你有用

拨弄TypeScript和javascript（它只更改最后一行）：

更新：要查看excel中格式正确的文件（每个逗号分隔值对应一个单元格），请执行以下操作：

您将看到几行数据。只需单击“A”列即可选择所有行：

转到excel并单击顶部的

数据

：

单击

文本到列

：

选择分隔符：

单击下一步并激活

逗号

：

单击

next

和

finish

。现在，您应该能够看到数据的正确格式

---

它起作用了！但是代码的方式看起来更复杂，也不容易理解。我认为下面的代码可能有点清楚

此外，我还通知过我们需要正确地保留对象键，例如，如果我们希望所有对象都在大写字母中，我们需要将对象名称保留在大写字母中，但对象键的属性我不希望是大写字母。大多数情况下，它应该是小写的。在这种情况下，这个解决方案也可能会有所帮助

让csvText=''；
data.forEach（（行，索引）=>{
如果（！ind）{
返回（csvText+=`${[
“股票”，
“MAXPAIN”，
“现金利率”，
“未来利率”，
“PE”，
"培爱",，
"行政长官",，
"策爱",，
“最大PC比率”，
‘个人电脑比率合计’
].join（“，”）}\r\n`）；
}
常量属性值=[row.stock，row.option，row.strike，0，row.put，row.put_oi，row.call，row.call_oi，0，0]；
return（csvText+=`${properValues.join（'，'）}\r\n`）；
});
console.log（csvText）；

---

确保标题值和非标题值返回的顺序相同；否则，它会僵化。

这个.ConvertToCSV（数据）

是您创建的自定义函数吗？你能告诉我们它的功能吗？什么是

ConvertToCSV

？它的输出是什么样子的？另外，如果问题在

console.log中很明显，为什么不从问题中排除其余的下载代码？这似乎无关紧要。这是convertToCSV（data）函数，我刚刚添加了它，该函数将对象数组转换为csv字符串我更新了代码，我正在取得进展，但我仍然不知道我想要的结果。首先感谢您的帮助，我尝试了代码，我得到一个错误，说“类型元素上不存在单击”，你可以在chrome开发工具上执行
document.querySelector（“下载csv”）
的最后一行代码，看看你是否得到了链接？是的，它工作正常，我得到了链接，这就是我得到的，然后你应该能够用
document.querySelector（“下载csv”）。单击（）
获得下载。这对我有用。还可以尝试
typeof document.querySelector（'download csv'）
它说它是一个对象
let csv

// Loop the array of objects
for(let row = 0; row < items.length; row++){
    let keysAmount = Object.keys(items[row]).length
    let keysCounter = 0

    // If this is the first row, generate the headings
    if(row === 0){

       // Loop each property of the object
       for(let key in items[row]){

                           // This is to not add a comma at the last cell
                           // The '\r\n' adds a new line
           csv += key + (keysCounter+1 < keysAmount ? ',' : '\r\n' )
           keysCounter++
       }
    }else{
       for(let key in items[row]){
           csv += items[row][key] + (keysCounter+1 < keysAmount ? ',' : '\r\n' )
           keysCounter++
       }
    }

    keysCounter = 0
}

// Once we are done looping, download the .csv by creating a link
let link = document.createElement('a')
link.id = 'download-csv'
link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(csv));
link.setAttribute('download', 'yourfiletextgoeshere.csv');
document.body.appendChild(link)
document.querySelector('#download-csv').click()