一:安装依赖
1:在package.json 中加入四个依赖包
(1): "json2csv": "^3.11.0",
(2):"file-saver": "^1.3.8",
(3):"xlsx": "^0.13.5",
(4):"script-loader": "^0.7.2",
(5):执行 npm install

二:引入js 文件;文件即文件存放位置如图;

三:配置webpack;添加 vendor: `${__dirname}/src/utils/vendor`,

四:开始测试:

测试
import CsvExport from 'utils/CsvExport';
const download = () => {
// columns 表格行列
const fields=[];//字段key
const fieldNames=[];//表头
for(let i=0,len=columns.length;i<len;i++){
fields.push(columns[i].dataIndex)
fieldNames.push(columns[i].title)
}
CsvExport(fields, fieldNames, '车辆列表', dataFormatter, callback, this.state.list)
//CsvExport(字段key, 表头, '导出exceil名字', 数据格式化函数, 打印回调函数,打印数据)

}

demo代码在 yms-smart-park 项目里面 xw_printRelease分支上;

gitlab 地址 git@gitlab.g2link-inc.cn:fullstack/yms-smart-park.git

测试路由地址 /smart-park/chargeManage/driver

前端生成excel的更多相关文章

  1. H5纯前端生成Excel表格

    H5纯前端生成Excel表格方法如下: <!DOCTYPE html> <html> <head> <title></title> < ...

  2. POI生成EXCEL文件

    POI生成EXCEL文件 一.背景 根据指定格式的JSON文件生成对应的excel文件,需求如下 支持多sheet 支持单元格合并 支持插入图片 支持单元格样式可定制 需要 标题(title),表头( ...

  3. 后台生成excel前端下载

    后台生成Excel时前端获取下载 Controller控制器: package com.example.test.controller; import com.example.test.common. ...

  4. java操作poi生成excel.xlsx(设置下拉框)下载本地和前端下载

    需求:导入excel表格,如果excel有错误,将错误的地方标红,在把数据以excel的形式写出,供用户下载解决方案:1.以实体类的方式接收excel并解析(创建两个集合一个接收正常的数据一个接收错误 ...

  5. 两种方式实现java生成Excel

    Web应用中难免会遇到需要将数据导出并生成excel文件的需求.同样,对于本博客中的总结,也是建立在为了完成这样的一个需求,才开始去了解其实现形式,并且顺利完成需求的开发,先将实现过程总结于此.本博文 ...

  6. 使用poi和jfreechart生成excel图表图片

    最近项目在频繁的操作excel,里边涉及到很多和图表有关的东西.有时候需要使用java操作excel自带的图标,比较复杂的我们都是使用excel模板的形式实现. 除此之外,也有一些功能只需要生成对应的 ...

  7. 2018年,请不要再使用OLE生成EXCEL文件

    输出EXCEL文件是ABAP开发工作中的常见需求,为了学习相关技术,我翻译过一篇文章:使用OLE2对象创建EXCEL文件,并且一度乐在其中. 最近几个月,经过与若干EXCEL打印程序的艰苦斗争,以及对 ...

  8. Echarts 数据视图 生成Excel的方法

    一.生成Excel,两大方向:1后台生成Excel 查询数据库,使用NOPI生成Excel.2前台js生成Excel三种方式1)jquery.table2excel.js --采用,优势:兼容IE和C ...

  9. python xlwt模块生成excel文件并写入数据 xlrd读取数据

    python中一般使用 xlwt (excel write)来生成Excel文件(可以控制单元格格式),用 xlrd 来读取Excel文件,用xlrd读取excel是不能对其进行操作的. 1.xlrd ...

随机推荐

  1. JavaScript属性(第三天)

    js语法非常灵活,这致使他非常好用,也造成它比较难掌握的地方: js中的值类型与引用类型在这里不做过多介绍,可以参照其他语言. js是可以动态添加属性的: var person={}; person. ...

  2. 图片万能居中css

    .div{text-align:center;} .div img{vertical-align:middle;} .div:after{content:"";display:in ...

  3. Ansys热应力计算

    目录 问题说明 温度场分析APDL 结果 问题说明 样块上下两端固定,在室温20℃下进行夹紧,分析其升温到150℃时的热应力. 采用间接法进行分析,温度场单元选择278,应力场单元为185 首先进行稳 ...

  4. Open Distro for Elasticsearch – How Different Is It?

    转自:https://logz.io/blog/open-distro-for-elasticsearch Last month, AWS announced an initiative called ...

  5. Idea动态java模板配置

    使用全能idea工具可以可以大大的提升开发效率,其中有个特别有用技能跟大家分享一下. 相比大家都用过idea的快速插入代码功能,插入诸如getter,setter还有构造函数生成,做到了只需一键点击就 ...

  6. react super() and super(props)

    subclass: subclass is a class that extends another class. 即子类. In ES2015, to use 'this' in subclasse ...

  7. Day11 expandtabs 制表

  8. Vue项目中GraphQL入门学习与应用

    1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...

  9. 使用doxc4j将word转pdf遇到的一个问题

    看到网上很多使用Docx4j将word转成pdf,于是cv工程师就开始了一系列复制粘贴操作,但是运行报错 最后经过修改

  10. HTML5 新的 Input 类型

    Input 类型: color(拾色器) color 类型用在input字段主要用于选取颜色,如下所示: 支持浏览器 实例 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type= ...