VUE中导出Excel功能的实现

一、在上一篇文章中我们已经完成了WebSql的操作，并且初始化了一些数据，那么如何导出这些数据呢？

**当然方法有多种，本次我们采用引入Export2Excel.js的方法

1、添加所需依赖

npm install file-saver
npm install xlsx
npm install script-loader

2、在src目录下新建一个文件夹，里面放入本次功能需要的文件：Blob.js和 Export2Excel.js（这两个文件可自行百度下载）

需要注意的是：Export2Excel.js中，顶部的路径需要根据自己的配置修改

3、在需要此功能的页面引入，注意路径（当然可以做成通用的方法，此处不做赘述）

3、调用此方法，本次我们使用上一篇文章中创建的数据库中的数据作为演示

        //格式化formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))},//获取城镇数据GetCityList:function(){var that=this;//与this区别开that.ExportList=[];this.$db.transaction(function(tx){tx.executeSql("select * from City",[],function(tx,res){for(var i=0;i<res.rows.length;i++){that.ExportList.push(res.rows[i]);}that.getExcel_city(that.ExportList);},function(tx,err){console.log(err);});});      },//导出城镇方法getExcel_city(res) {require.ensure([], () => {const tHeader = ['编码', '名称']const filterVal = ['CityID', 'Name']const list = resconst data = this.formatJson(filterVal, list)export_json_to_excel(tHeader, data, '城镇列表')})},

4、绑定到按钮上，点击按钮，可以导出excel：

二、介绍第二种方法：vue-json-excel

1、首先引入依赖

npm install vue-json-excel

2、在main.js中引用此方法

//引入导出excel组件方法
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

3、在需要使用此功能的页面中直接调用

//json_data为数据源List，json_fields为表头信息和取值逻辑<button :data="json_data" :fields="json_fields" name="UserInfo">点击导出</button>

        //表头为User_Name、City、phone、remark//取值逻辑为：User_Name取字段name//City取info中的city//phone取phone中的landline（拼接后）//remark取info中的remark（拼接后）json_fields: {"User_Name": "name", //常规字段"City": "info.city", //支持嵌套属性"phone": {field: "phone.landline",callback: value => {//自定义回调函数return `Landline Phone - ${value}`;//拼接返回值}},"remark": {field: "info.remark",callback: value => {return `Reamrk:  ${value}`;}}},//测试数据json_data: [{name: "张三",info:{city: "New York",country: "EN",remark:"测试1"},phone: {mobile: "1",landline: "11"}},{name: "李四",info:{city: "BeiJing",country: "CN",remark:"测试2"},phone: {mobile: "2",landline: "22"}},{name: "王二",info:{city: "Nanjing",country: "CN",remark:"测试3"},phone: {mobile: "3",landline: "33"}}],//数据格式json_meta: [[{" key ": " charset "," value ": " utf- 8 "}]]

4、导出结果

5、相关代码已经上传Github，地址如下：

https://github.com/736755244/Export

三、以上就是本次分享的内容，下一篇将介绍VUE导入并读取EXCEL的相关内容

欢迎留言，一起交流学习！

VUE中导出Excel功能的实现相关推荐

vue中导出Excel表格
vue中导出Excel表格项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体 ...
vue项目导出EXCEL功能
因为一些原因导出EXCEL功能必须前端来做,所以就研究了一下,在网上也找了一些文章来看,有一些不完整,我做完了就记录下来,供大家参考: 1.首先先安装依赖: npm install file-save ...
Vue实现导出Excel功能
目录 1.前端主导流程: 2. 插件使用及初始化 3.对后台数据进行处理,完成想要的效果 3.1 准备一个数据处理函数(最后会在回调里面使用) 3.2 先处理表头,定义一个对象,目的是待会将表头的 ...
vue中导出excel表格(支持导出图片)
//安装插件 npm install js-table2excel //引入插件 import table2excel from 'js-table2excel' //tableData数据 tabl ...
vue中实现Excel导入导出功能
导入Excel功能前置条件: 依赖包xlsx npm install xlsx -S 这里提供一个现成的在vue中导入Excel的功能(原作者-花裤衩),代码在最下面,可直接复制. 创建一个文件夹, ...
vue+iView实现导入与导出excel功能
vue+iView实现导入与导出excel功能一,需求: 1,导入导出的必要性导入与导出在日常项目开发中经常用到, 批量导入功能可以快速插入添加数据. 导出功能则可方便直观明了拿到所需展示的重要数 ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
vue导出excel功能实现
vue导出excel功能实现第一步安装依赖包第二步在项目中assets创建一个新的文件夹js用于存放Blob和Export2Excel两个js文件第三步在你那个组件中使用写事件方法 Expor ...
django excel 导出页面_Django Admin中增加导出Excel功能过程解析
在使用Django Admin时, 对于列表我们有时需要提供数据导出功能, 如下图: 增加导出Excel功能在Django Admin中每个模型的Admin类(继承至admin.ModelAdmin ...

VUE中导出Excel功能的实现

一、在上一篇文章中我们已经完成了WebSql的操作，并且初始化了一些数据，那么如何导出这些数据呢？

二、介绍第二种方法：vue-json-excel

三、以上就是本次分享的内容，下一篇将介绍VUE导入并读取EXCEL的相关内容

VUE中导出Excel功能的实现相关推荐

最新文章

热门文章