我知道这是一个已经回答的问题,但无法找到适合我的解决方案。
我有一个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文件,但是没有在csv文件中正确插入csv字符串,csv字符串是由逗号分隔的元素行,每行是由新行确定,但是每行的所有数据都位于csv文件的一个单元格中,如何使每行的每个值都位于不同的单元格中?
这是csv字符串:
name,color,size
Item 2,Green,X-Large
Item 3,Green,X-Large
答案 0 :(得分:0)
它有效!但是代码的方式看起来更复杂,不容易理解。我觉得下面的代码可能有点清楚。
另外,我通知我们需要正确地保留对象键,例如,如果我们希望所有的都在大写中,我们需要将对象名称保留在大写中,但对象键的属性我不喜欢大写。大多数情况下它应该是小写的。在这种情况下,这个解决方案也可能会有所帮助。
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);
确保heading值和不是heading值的返回顺序一致;否则,它会被石化。
答案 1 :(得分:-1)
CSV只是一个的文件,每个单元格用逗号分隔,每行用新行分隔。您希望将每列命名为对象的键。如果我理解正确:
{ "name": "Item 1", "color": "Green", "size": "X-Large" }
将是:
---------------------------
| name | color | size |
---------------------------
| Item 1 | Green | X-Large |
---------------------------
更新:这是更新版本。
因此,您可以使用HTML5中的File 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()
BTW如果您使用的是TypeScript,那么最后一行document.querySelector('#download-csv').click()
必须是<HTMLElement>document.querySelector('#download-csv').click()
让我知道它是否适合你。
TypeScript和javascript的小提琴(它只改变最后一行): https://jsfiddle.net/0p8revuh/4/
更新:要查看excel格式化的文件,每个逗号分隔值的单元格,请执行以下操作: