zoukankan      html  css  js  c++  java
  • 原生JS使用Blob导出csv文件

    最近在做关于文件下载的需求:前端调用接口,然后对返回数据进行过滤、格式化,然后按表格内容拼接生成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(' ')], {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"即可

  • 相关阅读:
    mongodb 简单的更新语句
    centos 安装ffmpeg 及h264编码打包
    mongodb $where查询
    javascript 上传进度条
    javascript 仿豆瓣读书笔记
    js监听浏览器剪贴板
    ffmpeg相关操作
    ffmpeg未整理好,有时间整理下
    fffmpeg 提取pcm
    ffmpeg转MP4 moov头在前命令
  • 原文地址:https://www.cnblogs.com/so-letitgo/p/11905899.html
Copyright © 2011-2022 走看看