为艺术而技术

JS写CSV

July 12, 2019

在JS框架盛行的现在,临时输出一个CSV文件让用户下载,是个很平常的需求。我遇到了一点问题。

问题

你有一个json对象的数组,需要输出作为csv供用户下载。

[{...}, {...}, {...}]

通常模式

const replacer = (key, value) => value === null ? '' : value; // specify how you want to handle null values here
const header = Object.keys(data[0]);
var csv = data.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
csv.unshift(header.join(','));
csv = csv.join('\r\n');
$scope.downloadCsv = 'data:text/csv;charset=utf-8,' + encodeURI(csv);

在加上如下的html即可。

	<div ng-if="xxx">
		Please download <a href={{$scope.downloadCsv}} download="haicurt.csv" target="_blank">here</a> if you want all.
	</div>

高级模式

可是,如果你的csv文件内容太大,Chrome浏览器就会说Network Error导致你没有办法下载。解决办法是使用BLOB.

const replacer = (key, value) => value === null ? '' : value; // specify how you want to handle null values here
const header = Object.keys(data[0]);
var csv = data.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
csv.unshift(header.join(','));
csv = csv.join('\r\n');
var csvData = new Blob([csv], {type: 'text/csv'});
ctrl.downloadCsv = URL.createObjectURL(csvData);

感谢


Qingfei Yuan

Written by Qingfei Yuan who builds useful things.

© 2019 - 2020 yuanqingfei
Creative Commons License