我想知道是否有任何方法可以使用 react.onClick 下载我网页上 EXPORT 按钮的 csv 文件。
这是我现在在组件下的内容-
<div>
<Button variant="contained"
size="small"
onClick={this.handleExport}>
<SaveIcon label="Export" />
Export
</Button>
</div>
其中 handleExport 使用来自后端的 JSON 数据生成一个 csv 文件。
我曾尝试使用 react-csv、react-csv-downloader 包，但没有一个对我有用。
有什么办法可以下载 csv 文件 onClick？示例代码将不胜感激。
谢谢！
我实现了这个逻辑。代码是非常不言自明的。
export function exportCSVFile(headers, items, fileTitle) {
if (headers) {
items.unshift(headers)
}
// Convert Object to JSON
var jsonObject = JSON.stringify(items)
var csv = convertToCSV(jsonObject)
var exportedFilename = fileTitle + '.csv' || 'export.csv'
var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, exportedFilename)
} else {
var link = document.createElement('a')
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob)
link.setAttribute('href', url)
link.setAttribute('download', exportedFilename)
link.style.visibility = 'hidden'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}
}