近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了。

  1、安装相关依赖(npm安装可能会出现某些错误,可以使用cnpm):

npm install file-saver --save   // 保存文件用
npm install xlsx --save // 转二进制用
npm install script-loader --save-dev // xlsx核心文件

  

  2、下载两个核心js文件,Blob.js和 Export2Excel.js  下载地址:Blob.js和 Export2Excel.js文件

  

  3、在src目录下新建vendor文件夹,将Blob.js和 Export2Excel.js放进去。

  4、更改webpack.base.conf.js配置。

  在resolve的alias里添加如下代码:

'vendor': path.resolve(__dirname, '../src/vendor')

  5、在需要导出excel格式文件的页面中写入以下两个方法,如:

methods: {
formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
  },
export2Excel() {
const _this = this
   require.ensure([], () => {
   const { export_json_to_excel } = require('../vendor/Export2Excel');
   const tHeader = ['ID', '封面', '小说名','二级分类','作者','进度','更新时间', '状态'];
   const filterVal = ['novelId', 'imageUrl', 'title', 'categoryName', 'author', 'completeStatus', 'updateTime', 'status'];
   const list = _this.dataList;
   const data = _this.formatJson(filterVal, list);
   export_json_to_excel(tHeader, data, '小说列表');
   })
}
}

  注意:tHeader表示表头的标题,filterVal表示表头的字段名,可通过点击事件调用导出方法。

<button type="primary" @click="export2Excel">导出</button>

  

将页面中表格数据导出excel格式的文件(vue)的更多相关文章

  1. Vue2.0---将页面中表格数据导出excel

    这不是教程,是随笔. 项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL 只说怎么做. 一.需要安装三个依赖: npm install -S file-saver xlsx ...

  2. Vue+element UI实现表格数据导出Excel组件

    介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...

  3. SQLYOG如何将数据导出excel格式

    方法/步骤     如图,笔者的数据库中有一张student表,想把这张表中的数据导出成excel   在这张表上右击,选择“Export”,再选择“Export Table Data as CSV, ...

  4. 前端 vue表格数据导出Excel 文件实现

    实现思路 使用json2csv将后台json数据转化为csv格式数据 采用创建Blob(二进制大对象)的方式来存放缓存数据: 生成下载链接: 创建一个a标签,设置href和download属性 触发a ...

  5. JS将页面中表格,导出到Excel中(IE中)

    原文地址:http://blog.csdn.net/sinat_15114467/article/details/51098522 var idTmr; function getExplorer() ...

  6. ASP.Net MVC中数据库数据导出Excel,供HTTP下载(转)

    转自http://www.cnblogs.com/hipo/archive/2012/03/13/2394019.html 一.关于下载 一般对下载权限有没有限制,或安全性要求不高的情况下,基于web ...

  7. ASP.Net MVC中数据库数据导出Excel,供HTTP下载

    本文来自:http://www.cnblogs.com/hipo/archive/2012/03/13/2394019.html 一.关于下载 一般对下载权限有没有限制,或安全性要求不高的情况下,基于 ...

  8. 前端表格数据导出excel

    使用tableExport.js导出bootstrap-table表格成excel并且支持中文 1. 下载tableExport.js https://github.com/hhurz/tableEx ...

  9. MVC 实现表格数据导出Excel(NPOI方式)

    前端View(@ViewBag为查询条件): <span id="exprobtn" class="btn_blue" style="dispa ...

随机推荐

  1. BZOJ 2301 [HAOI2011]Problem b (分块 + 莫比乌斯反演)

    2301: [HAOI2011]Problem b Time Limit: 50 Sec  Memory Limit: 256 MBSubmit: 6519  Solved: 3026[Submit] ...

  2. Linux创建一个周期任务来定期删除过期的文件

    一:需求 在开发中存在这样的情况,为了防止文件的误删,不允许开发人员直接删除项目中要用到的文件,而是将它们移动到某个目录,然后由一个周期任务去检测并删除内部过期的文件: 二:检测文件是否是过期文件 有 ...

  3. 如何使用阿里巴巴iconfont矢量图片

    ①打开此网站http://www.iconfont.cn/ , 选择需要的几个图形 → 加入购物车 → 添加至项目 → 给项目随便命名 → 点击电线连接并点击代码 → 复制代码到css ②在body里 ...

  4. 学以致用六---Centos7.2+python3.6.2+django2.1.1 --搭建一个网站

    目的,创建django project,开始django web之旅 一.创建一个project    在opt目录下创建一个project [root@gxc opt]# django-amdin. ...

  5. How to temporally disable IDE tools (load manually)

    It is possible to prevent the IDE Tools from being loaded automatically when starting Visual Studio. ...

  6. C#——字符串

    aaarticlea/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAA8CAMAAAA6wCQxAAAAGFBMVEX////w9f5kb9TGyu3b6P6hp

  7. 初识Android的ReactiveX

    初识Android的ReactiveX 开发一个复杂一点的Android应用都会用到网络请求,交互和动画.这些都意味着 要写很多的回调嵌套.这样的代码也被称为callback hell(回调地狱).这 ...

  8. C#-VS配置开发环境-摘

    配置开发环境   包含的开发环境 LightSwith LightSwitch 微软出品 web界面开发部署非常方便

  9. docker+phantomjs+haproxy 搭建phantomjs集群

    目标: 搭建一个远程的phantomjs服务器,提供高可用服务,支持并发. 原料: 1.docker环境.docker-compose环境 2.phantomjs镜像: docker.io/werni ...

  10. _ZNote_Qt_对话框_模态非模态

    QDialog(及其子类,以及所有Qt::Dialog类型的类)的对于其 parent 指针都有额外的解释:如果 parent 为 NULL,则该对话框会作为一个顶层窗口,否则则作为其父组件的子对话框 ...