个人认为前端VUE项目中导出EXCEL比较好的两种方法,均不是我个人原创,我只是收录简单说明,原创地址在下面。

  • 下面推荐两种方法,个人推荐第一种,第二种不做详细讲解,因为作者已经写过博客了,你们可以点击下面链接去学习一下。

下面开始讲第一种vue-json-excel

npm安装依赖包

npm install vue-json-excel

项目入口文件引进注册并且使用
import Vue from 'vue'
import JsonExcel from 'vue-json-excel' Vue.component('downloadExcel', JsonExcel)
在页面中使用
<download-excel
class = "export-excel-wrapper"
:data = "json_data"
:fields = "json_fields"
name = "filename.xls">
<!-- 上面可以自定义自己的样式,还可以引用其他组件button -->
<!-- <el-button type="primary" size="small">导出EXCEL</el-button> -->
</download-excel>
简单说明一下组件属性
  • json_data: 需要导出的数据
  • json_fields: 自主选择要导出的字段,指定嵌套数据并将标签分配给键是标签的字段,值是JSON字段。这将“按原样”导出字段数据。如果需要自定义导出的数据,可以定义回调函数。
属性名 类型 描述
data Array 需要导出的数据,支持中文
fields Object 定义需要导出的数据
name string 导出EXCEL的文件名
type string 导出EXCLE的文件类型,两种格式xls,csv,默认是xls
可能上面描述不是很明白,下面给个实例,

注意一下几点

  • json_fields里面的属性是excel表每一列的title,注意多个词组组成的属性名要加双引号
  • 如果需要自定义导出的数据,可以定义回调函数。
data() {
return {
json_fields: {
"Complete name": "name", //常规字段
Telephone: "phone.mobile", //支持嵌套属性
"Telephone 2": {
field: "phone.landline",
//自定义回调函数
callback: value => {
return `Landline Phone - ${value}`;
}
}
},
json_data: [
{
name: "Tony Peña",
city: "New York",
country: "United States",
birthdate: "1978-03-15",
phone: {
mobile: "1-541-754-3010",
landline: "(541) 754-3010"
}
},
{
name: "Thessaloniki",
city: "Athens",
country: "Greece",
birthdate: "1987-11-23",
phone: {
mobile: "+1 855 275 5071",
landline: "(2741) 2621-244"
}
}
],
json_meta: [
[
{
" key ": " charset ",
" value ": " utf- 8 "
}
]
]
};
}
EXCEL截图

![EXCEL截图](http://p5z2wdpjb.bkt.clouddn.com/20180918111333.png ''EXCEL截图'')

以上就是这次随笔的内容了,我觉得vue-json-excel已经可以满足大多数的需求了,有什么问题可以去gitub提问或者在我博客下方评论,我会第一时间回复。

个人推荐的两款vue导出EXCEL插件的更多相关文章

  1. 由需求而产生的一款db导出excel的工具

    代码地址如下:http://www.demodashi.com/demo/12062.html 程序员最大的毛病可能就是懒,因为懒所以做出了许许多多提高自己工作效率的工具. 起因于我是商业开发,既然是 ...

  2. 导出Excel插件——Export-CSV ---20150610

    出处:http://bbs.hcharts.cn/thread-99-1-1.html   导出Excel插件——Export-CSV 一.插件信息 插件名:Export-CSV(导出Execl文件) ...

  3. vue 导出excel表格

    对于涉及到数据比较多的管理后台导出excel 表格这个需求就非常的常见了 所以? vue 怎么到处excel表格的? 有两种办法 1:请求接口后台直接给你的是excel文件,你需要做的就是怎么接收ex ...

  4. 【vue开发】vue导出Excel表格教程&demo

    前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...

  5. vue 导出excel

    1.安装三个依赖包 npm install -S file-saver npm install -S xlsx npm install -D script-loader 2.在项目中创建一个文件夹(比 ...

  6. 使用vue导出excel文件

    今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,https://www.cnblogs.com/yeqrblog/p/9758981.html,但是 ...

  7. vue导出Excel文件

    1.需要安装file-saver和script-loader.xlsx npm install file-saver / yarn add file-saver npm install script- ...

  8. vue 导出excel后端返回乱码下载不了的解析问题

    有俩种方法可以用 第一种方法: 解析:直接解析并且下载后端的乱码  this.download('后端给的导出excel的方法', {        ...this.queryParams  }, ` ...

  9. 优秀工具推荐:两款很棒的 HTML5 游戏开发工具

    HTML5 众多强大特性让我们不需要多么高深技术就能创建好玩的网页游戏,同时证明了开放的 Web 技术能与任何其他在游戏开发中使用的技术竞争.正如标题所说,这篇文章推荐的几款很棒 HTML5 游戏开发 ...

随机推荐

  1. Java基本的程序结构设计 数组

    声明数组: int[] a; int a[]; 两种方式.一般选择第一种,比较一目了然. 初始化,必须指定长度: int[] a = new int[10]; int[] a = {1,2,3}; 初 ...

  2. Python修炼之路-数据类型

    Python编程之列表 列表是一个使用一对中括号"[   ]" 括起来的有序的集合,可以通过索引访问列表元素,也可以增加和删除元素. 列表的索引:第一个元素索引为0,最后一个元素索 ...

  3. ps制作雾的效果

    制作雾的效果 方法一: 新建图层,将前景色设置为白色,背景色为黑色(因为雾的颜色是根据前景色决定的,也可根据这个原理制作火焰效果) 选择滤镜->渲染->云彩(也可选择其他效果的云彩) (选 ...

  4. linux查杀minergate-cli/minerd病毒

    redis的漏洞让公司的服务器中了挖矿的病毒,入侵者在服务器上留了后门.每次只是把进程杀杀,但是过段时间病毒又回来了,这个事情一直让人头疼.先是minerd的病毒入侵,后是minergate-cli入 ...

  5. 【java】并发执行ExecutorService的sumbit返回值的顺序问题

    ArrayList<Future> fl = new ArrayList<Future>(); for (int i = 0; i < 10; i++) { Future ...

  6. Apache Flink CEP 实战

    本文根据Apache Flink 实战&进阶篇系列直播课程整理而成,由哈啰出行大数据实时平台资深开发刘博分享.通过一些简单的实际例子,从概念原理,到如何使用,再到功能的扩展,希望能够给打算使用 ...

  7. 数据:ContentProvider类

    一个程序可以通过实现一个Content provider的抽象接口将自己的数据完全暴露出去,而且Content providers是以类似数据库中表的方式将数据暴露.   Content provid ...

  8. CDOJ 203 并查集+优先队列 好题

    题目链接 Islands Time Limit: 30000/10000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) S ...

  9. [BZOJ3812]主旋律:状压DP+容斥原理

    分析 Miskcoo orz 令\(f[S]\)表示使得\(S\)这个点集强连通的方案数. 然后呢?不会了 考虑到将一个有向图SCC缩点后,得到的新图是一个DAG,所以我们可以类比带标号DAG计数的解 ...

  10. [LeetCode]-DataBase-Department Highest Salary

    The Employee table holds all employees. Every employee has an Id, a salary, and there is also a colu ...