react 把this.state的数据可以下载CSV,触发事件才下载
点击下载的按钮,可以下载原始的数据(未经处理,不会每次刷新就自动下载文件)例如:
export default class CalculationViewResult extends Component {
// 省略其他代码
exportToCSV(resultData) {
// 获取params和results的值
const params = resultData.map((item) => item.params);
const results = resultData.map((item) => item.results);
// 创建CSV内容
const csvContent = `Params\n${JSON.stringify(params)}\n\nResults\n${JSON.stringify(results)}`;
// 创建Blob对象
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
// 创建URL对象
const url = URL.createObjectURL(blob);
// 创建一个隐藏的<a>元素
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'data.csv');
document.body.appendChild(link);
// 模拟点击下载链接
link.click();
// 清理
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
// 省略其他代码
render() {
return (
<div>
{/* 其他组件内容 */}
<button onClick={() => this.exportToCSV(this.getResultData())}>下载</button>
</div>
);
}
}