ant 保存表格数据为本地文件

  1. npm下载插件

npm install file-saver --save

  1. 导出表格数据
import FileSaver from 'file-saver';

// 根据表格传入的 columns 和 dataSource 导出文件
handleExport = () => {
    const { dataSource, columns } = this.props;
    // 生成文件列名
    let fileStr = '';
    columns.forEach((item, index) => {
      if (index === 0) {
        fileStr = item.title;
      } else {
        fileStr += `,${item.title}`;
      }
    });
    // 生成文件数据
    dataSource.forEach(item => {
      // 根据传入的 columns 信息生成每一行数据
      columns.forEach((el, index) => {
        if (index === 0) {
          fileStr += `\n ${item[el.dataIndex]}`;
        } else {
          fileStr += `,${item[el.dataIndex]}`;
        }
      });
    });
    console.log(fileStr);
    // Excel打开后中文乱码添加如下字符串解决
    const exportContent = '\uFEFF';
    const blob = new Blob([exportContent + fileStr], {
      type: 'text/plain;charset=utf-8',
    });
    FileSaver.saveAs(blob, 'List.csv');
  };
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 6,392评论 0 2
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 5,683评论 0 1
  • 学习目的 学习前端构建化工具 webpack,能熟练掌握 并使用 webpack 对项目进行打包优化。 ...
    _1633_阅读 5,154评论 0 7
  • JavaScript 模块化编程 网站越来越复杂,js代码、js文件也越来越多,会遇到什么问题? 命名冲突; 文件...
    magic_pill阅读 5,338评论 0 1
  • 作者:小 boy (沪江前端开发工程师)本文原创,转载请注明作者及出处。原文地址:https://www.smas...
    iKcamp阅读 7,657评论 0 18