从 javascript 个对象数组生成一个 csv 文件

Question

我知道这个问题已经得到解答，但找不到适合我的解决方案。

我有一个 HTML 按钮，单击该按钮会在打字稿中生成一个对象数组（基本上是 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 文件，但没有在 csv 文件中正确插入 csv 字符串，csv 字符串的元素行用逗号分隔，每行是由换行确定，但这里每一行的所有数据都位于 csv 文件的一个单元格中，我怎样才能使每一行的每个值都位于不同的单元格中？

这是它的 csv 字符串：

    name,color,size
Item 2,Green,X-Large
Item 3,Green,X-Large

Answer 1

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()

顺便说一句，如果您使用的是 TypeScript，那么最后一行 document.querySelector('#download-csv').click() 必须是 <HTMLElement>document.querySelector('#download-csv').click() 让我知道它是否适合你。

Fiddle 对于 TypeScript 和 javascript （它只改变最后一行）： https://jsfiddle.net/0p8revuh/4/

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

您将在几行中看到您的数据。只需单击 'A' 列即可 select 所有行：
转到您的 excel 并单击顶部的 Data：
点击Text to columns：
Select分隔：
点击下一步激活comma:
单击 next 和 finish。现在您应该能够看到您的数据格式正确。

Answer 2

有效！但是代码的方式看起来比较复杂，不容易理解。我认为下面的代码可能有点清晰。

此外，我通知我们需要正确保留 object 键例如，如果我们想要全部都在首都，我们需要在首都保留 object 名称，但属性 object 键的我不喜欢大写。大多数时候应该是 lowercase.In 这种情况，这个解决方案也可能有帮助。

  let csvText = '';

    data.forEach((row, ind) => {
      if (!ind) {
        return (csvText += `${[
          'STOCK',
          'MAXPAIN',
          'CASH RATE',
          'FUTURE RATE',
          'PE',
          'PE OI',
          'CE',
          'CE OI',
          'PC RATIO MAX',
          'PC RATIO TOTAL'
        ].join(',')}\r\n`);
      }

      const properValues = [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);

确保标题值和标题值return不是同一个订单；不然会石化

从 javascript 个对象数组生成一个 csv 文件

Generate a csv file from a javascript array of objects

javascript

arrays

json

object

export-to-csv