个人认为前端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. JVM体系结构及优化

    源文档:https://docs.oracle.com/javase/8/docs/technotes/guides/vm/index.html JVM体系结构     方法区,类加载器,堆,Java ...

  2. 9 斐波那契数列Fibonacci

    题目1:写一个函数,输入n,求Fibonacci数列的第n项.该数列定义如下: n=0时,f(n)=0; n=1时,f(n)=1; n>1时,f(n)=f(n-1)+f(n-2) 1. 效率差的 ...

  3. $.param()序列化对象

    1.$.param(): param() 方法创建数组或对象的序列化表示形式. 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中. 第一行是原始数据,第二行是序列化后的.$.param( ...

  4. 使用swagger生成API说明文档

    使用swagger生成API说明文档本文由个人总结,如需转载使用请标明原著及原文地址没有导出!!!!!不要整天给我留言导出呢,那个是你们百度的时候下面的推荐文章带的关键字,要做导出从swagger取数 ...

  5. 使用Swagger自动生成文档

    1.maven依赖 maven仓库(https://mvnrepository.com/)搜索springfox <!-- https://mvnrepository.com/artifact/ ...

  6. JAVA支持HTTP断点续传

    第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname =  ...

  7. matlab中句柄@的用法

    @是Matlab中的句柄函数的标志符,即间接的函数调用方法. 1 句柄函数 主要有两种语法: handle = @functionname handle = @(arglist)anonymous_f ...

  8. 【gym102394B】Binary Numbers(DP)

    题意:From https://blog.csdn.net/m0_37809890/article/details/102886956 思路: 可以发现转移就是右上角的一个区间前缀和 std只要开1倍 ...

  9. 使用ros_driver运行velodyne16线激光雷达

    一.使用ros_driver运行VLP16 推荐网址: http://blog.csdn.net/littlethunder/article/details/51920681 https://www. ...

  10. Spring Data Jpa (三)定义查询方法

    本章详细讲解如何利用方法名定义查询方法(Defining Query Methods) (1)定义查询方法的配置方法 由于Spring JPA Repository的实现原理是采用动态代理的机制,所以 ...