在vue中把数据导出Excel文件

第一次尝试写文章
在vue中把数据导出成Excel格式的文件，话不多，上代码：

第一步我们要先安装几个集成的插件

npm install -S file-saver xlsx
npm install -D script-loader
npm install -S xlsx-style

第三个插件，稍后在介绍
2. 你需要在你的src的目录下面加一个excel的文件夹，在excel的文件里面新建一个Export2Excel.js的文件。如图下
3. Export2Excel.js的内容百度网盘链接如下：
https://pan.baidu.com/s/121a1AEtLs5QGI7FoCbZyUw 提取码：HGDY
4.下面该到了写代码的部分了，代码奉上：

export default {data() {return: {tableData: [{'index':'0',"nickName": "心中一点浩然气", "name": "小明"},{'index':'1',"nickName": "天地千里快哉风", "name": "小红"},{'index':'2',"nickName": "吾善养浩然气", "name": "小兰"}]}},created() {this.Export2Excel(this.tableData)},methods: {Export2Excel(dataList) {// 这个引入路径就是你刚才创建的那个文件import('../../excel/Export2Excel2').then(excel => {const tHeader = ['序号', '签名', '姓名']const title = ['', '', '']; // 这个title和上面数组的数量必须是一致的但是可以是空的// 表头对应字段const filterVal =['index', 'nickName', 'name'];const list = dataListconst data = this.formatJson(filterVal, list)data.map(item => {// console.log(item)item.map((i, index) => {if (!i) {item[index] = ''}})})// const merges = ['A1:I1'] //合并单元格excel.export_json_to_excel({title: title,header: tHeader,data,// merges,filename: '导出的数据',autoWidth: true,bookType: 'xlsx'})})},formatJson(filterVal, jsonData) { // 数据转换return jsonData.map(v => filterVal.map(j => v[j]))}}
}

现在让我们来说一下上面我吗下载的第三个插件是干什么用的，这个插件是让我们把导出excel的文件改的好看一点，当然这个也得自己去用代码写样式下面给大家推荐一个修改xlsx-styke修改样式的文章。
https://www.cnblogs.com/yinxingen/p/11052184.html
最后就这样吧。

在vue中把数据导出Excel文件相关推荐

DataTable中的数据导出Excel文件
DataTable中的数据导出Excel文件 View Code ///<summary> /// 将DataTable中的数据导出到指定的Excel文件中 ///</summary ...
关于Excel操作编写的一个软件设计构思案例[连载] --如何把处理好后的数据导出Excel文件中(含背景\字体颜色设置)
导出数据到Excel文件中二种方法四种形式:其一是创建新的Excel文件实例写入数据:其二是打开已有Excel文档对其执行更新或插入数据:保存文档方法有:直接保存(2种).另存.间接保存.接下来分别介 ...
springboot中使用poi导出excel文件(亲测实现了第一个功能)
1.POI简介 Jakarta POI 是一套用于访问微软格式文档的Java API. 组件HWPF用于操作Word的; 组件HSSF用于操作Excel格式文件. 2.常用组件 HSSFWorkboo ...
Yii框架中使用PHPExcel导出Excel文件
Yii框架中使用PHPExcel导出Excel文件http://www.cnblogs.com/wgx214/p/3709521.html 转载于:https://www.cnblogs.com/fl ...
将页面中表格数据导出excel格式的文件（vue）
近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...
C# DataGridView数据导出Excel文件
前言: 博主在做项目的时候需要把数据库的数据用DataGridView展示,然后把展示的数据导出为Excel文件,很多时候我们做项目都会有一个下载文件的按钮,我们需要用微软的的接口,Microsoft ...
用ado把excel数据写入oracle,如何将excel表格数据导入到oracle数据库对应的表中？!oracle导出excel文件...
如何把excel里的表导入到oracle里使用第三方工具吧,toad之类的一个excel表格中有多个sheet,如何将其导入oracle数据库户和要用DBA 最简单得建用户: create us ...
ASP.NET中GridView数据导出EXCEL小结
本周按业务部门的要求,做一个客户拜访登记管理的小程序(B/S模式),在这里面用到了GridView来显示根据条件查询到的数据,但业务部门同时要求数据要导出为EXCEL方面使用,在网上查找了很多资料,汇 ...
java struts2 excel上传_Java Struts2 实现数据库数据导出Excel文件
HTML: 导出 Struts.xml true application/vnd.ms-excel;charset=GBK excelStream attachment;filename=${file ...

在vue中把数据导出Excel文件

在vue中把数据导出Excel文件

在vue中把数据导出Excel文件相关推荐

最新文章

热门文章