我试图弄清楚是否有任何方法可以使用 React 在我的网页上单击“导出”按钮来下载 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 吗?示例代码将不胜感激。
Thanks!
我已经实现了这个逻辑。代码非常不言自明。
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)
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)