vue合并表格excel导出_Vue+element UI实现表格数据导出Excel组件

介绍

这是一个可以将页面中的表格数据导出为Excel文件的功能组件，该组件一般与表格一起使用，将表格数据传给组件，然后通过点击组件按钮可将表格中的数据导出成Excel文件。

使用方法

由于封装该组件内部引用了xlsx.js，file-saver.js和elementUI，因此在使用该组件时，请先安装如下依赖：

npm install xlsx file-saver element-ui --save

安装好依赖后，只需将该组件文件夹ExportExcel导入到现有项目中即可使用。

使用示例

import ExportExcel from './ExportExcel'

export default {

name: 'app',

components: { ExportExcel},

data() {

return {

list:null,

tHeader:['Id', '告警类型', '告警内容', '告警时间(段)', '告警次数'],

tValue:['id', 'type', 'content', 'time', 'count'],

}

}

}

选项

属性

描述

类型

是否必须

list

由后端返回的表格数据

Array

是

tHeader

导出的Excel文件表头标题

Array

是

tValue

要将表格数据中的哪些字段作为数据导出至Excel，与表头一一对应

Array

是

filename

导出的Excel文件名，默认为“导出数据.xlsx”

String

否

选项说明

关于选项中的tHeader和tValue说明如下：

例如将如下表格数据导出成Exlcel：

其中表头数据为：

所以tHeader为：

tHeader:['Id', '告警类型', '告警内容', '告警时间(段)', '告警次数']

后端返回的表格数据list为：

[

{

"id":1,

"type":"",

"content":"",

"time":"",

"count":"",

},

{

"id":2,

"type":"",

"content":"",

"time":"",

"count":"",

},

//....

]

其中：

list中的id------->表头的ID

list中的type------->表头的'告警类型'

list中的content------->表头的'告警内容'

list中的time------->表头的'告警时间(段)'

list中的count------->表头的'告警次数'

所以tValue为：

tValue:['id', 'type', 'content', 'time', 'count']

效果图

组件代码

(完)

将页面中表格数据导出excel格式的文件(vue)

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

vue+element ui 的表格列使用组件

前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

vue+element ui 的上传文件使用组件

前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

前端表格数据导出excel

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

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

前端View(@ViewBag为查询条件):