原生JS使用Blob导出csv文件
2024-10-08 02:16:23
最近在做关于文件下载的需求:前端调用接口,然后对返回数据进行过滤、格式化,然后按表格内容拼接生成csv文件,让用户下载。
具体实现方式如下:let sourceData = {
head: [ '时间', '成交价格', '成交数量', '手续费', '成交金额', ],
data: [
{time: '2019-10-17 14:54:52', tradePrice: '30.0022.001.32 TWD', fee:'0 TWD', tradeAmount: '660.00',},
{time: '2019-10-17 14:54:36', tradePrice: '30.0089.005.34 TWD', fee:'0 TWD', tradeAmount: '2,670.00',},
{time: '2019-10-17 14:54:07', tradePrice: '21.00500.0021 TWD', fee:'0 TWD', tradeAmount: '10,500.00',},
]
}
// 格式化
const data = [sourceData.head.join(',')].concat(sourceData.data.map(item => {
return [
item.time,
`"${item.tradePrice}"`,
`"${item.fee}"`,
`"${item.tradeAmount}"`,
].join(',')
}))
// 创建Blob对象 传入一个合适的MIME类型
const blob = new Blob(['\ufeff' + data.join('\n')], {type: 'text/csv,charset=UTF-8'}); // 参考链接 https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
// 使用 Blob 创建一个指向类型化数组的URL
const csvUrl = URL.createObjectURL(blob); // 参考链接 https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
let link = document.createElement('a');
link.download = `details_${new Date().getTime()}.csv`; //文件名字
link.href = csvUrl;
// 触发下载
link.click();
注意事项:
1. 数据中存在 ',' 逗号问题处理:将整个数据用双引号(英文格式)包裹起来,这样会显示成一个单元格。
2. 拼接后的数据如何直接下载,不需要用户在操作:动态创建a标签,并调用点击事件
3. 中文乱码解决方案:在数据前面加上字符串"\ufeff"即可
最新文章
- [python] 安装numpy+scipy+matlotlib+scikit-learn及问题解决
- [DFNews] Touch ID不是神话,指模依旧能搞定。
- SharePoint2010升级到SharePoint2013操作手册
- Subversion详解
- artdialog4.1.7 中父页面给子页面传值
- Hexo搭建Github静态博客
- MySQL(二)
- mac 显示隐藏文件夹
- C++文件操作(输入输出、格式控制、文件打开模式、测试流状态、二进制读写)
- d3 之deal with data
- CodeForces 573A Bear and Poker
- 你为什么学MSP430
- linux下gdal的python包的安装
- Web 应用程序项目 XXXX 已配置为使用 IIS。 无法访问 IIS 元数据库。您没有足够的特权访问计算机上的 IIS 网站。(转载)
- SDWebImage源码解读之干货大总结
- css的各种选择器
- Java中的大小写字母相互转换(不利用Java自带的方法)
- 开源项目——小Q聊天机器人V1.2
- jQuery事件控制点击内容下拉
- go报错unimplemented: 64-bit mode not compiled in与mingw 64位安装报错ERROR res已解决