个人推荐的两款vue导出EXCEL插件
个人认为前端VUE项目中导出EXCEL比较好的两种方法,均不是我个人原创,我只是收录简单说明,原创地址在下面。
- 下面推荐两种方法,个人推荐第一种,第二种不做详细讲解,因为作者已经写过博客了,你们可以点击下面链接去学习一下。
- 第一种vue-json-excel
- 第二种vue2.0-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插件的更多相关文章
- 由需求而产生的一款db导出excel的工具
代码地址如下:http://www.demodashi.com/demo/12062.html 程序员最大的毛病可能就是懒,因为懒所以做出了许许多多提高自己工作效率的工具. 起因于我是商业开发,既然是 ...
- 导出Excel插件——Export-CSV ---20150610
出处:http://bbs.hcharts.cn/thread-99-1-1.html 导出Excel插件——Export-CSV 一.插件信息 插件名:Export-CSV(导出Execl文件) ...
- vue 导出excel表格
对于涉及到数据比较多的管理后台导出excel 表格这个需求就非常的常见了 所以? vue 怎么到处excel表格的? 有两种办法 1:请求接口后台直接给你的是excel文件,你需要做的就是怎么接收ex ...
- 【vue开发】vue导出Excel表格教程&demo
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...
- vue 导出excel
1.安装三个依赖包 npm install -S file-saver npm install -S xlsx npm install -D script-loader 2.在项目中创建一个文件夹(比 ...
- 使用vue导出excel文件
今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,https://www.cnblogs.com/yeqrblog/p/9758981.html,但是 ...
- vue导出Excel文件
1.需要安装file-saver和script-loader.xlsx npm install file-saver / yarn add file-saver npm install script- ...
- vue 导出excel后端返回乱码下载不了的解析问题
有俩种方法可以用 第一种方法: 解析:直接解析并且下载后端的乱码 this.download('后端给的导出excel的方法', { ...this.queryParams }, ` ...
- 优秀工具推荐:两款很棒的 HTML5 游戏开发工具
HTML5 众多强大特性让我们不需要多么高深技术就能创建好玩的网页游戏,同时证明了开放的 Web 技术能与任何其他在游戏开发中使用的技术竞争.正如标题所说,这篇文章推荐的几款很棒 HTML5 游戏开发 ...
随机推荐
- JVM体系结构及优化
源文档:https://docs.oracle.com/javase/8/docs/technotes/guides/vm/index.html JVM体系结构 方法区,类加载器,堆,Java ...
- 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. 效率差的 ...
- $.param()序列化对象
1.$.param(): param() 方法创建数组或对象的序列化表示形式. 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中. 第一行是原始数据,第二行是序列化后的.$.param( ...
- 使用swagger生成API说明文档
使用swagger生成API说明文档本文由个人总结,如需转载使用请标明原著及原文地址没有导出!!!!!不要整天给我留言导出呢,那个是你们百度的时候下面的推荐文章带的关键字,要做导出从swagger取数 ...
- 使用Swagger自动生成文档
1.maven依赖 maven仓库(https://mvnrepository.com/)搜索springfox <!-- https://mvnrepository.com/artifact/ ...
- JAVA支持HTTP断点续传
第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname = ...
- matlab中句柄@的用法
@是Matlab中的句柄函数的标志符,即间接的函数调用方法. 1 句柄函数 主要有两种语法: handle = @functionname handle = @(arglist)anonymous_f ...
- 【gym102394B】Binary Numbers(DP)
题意:From https://blog.csdn.net/m0_37809890/article/details/102886956 思路: 可以发现转移就是右上角的一个区间前缀和 std只要开1倍 ...
- 使用ros_driver运行velodyne16线激光雷达
一.使用ros_driver运行VLP16 推荐网址: http://blog.csdn.net/littlethunder/article/details/51920681 https://www. ...
- Spring Data Jpa (三)定义查询方法
本章详细讲解如何利用方法名定义查询方法(Defining Query Methods) (1)定义查询方法的配置方法 由于Spring JPA Repository的实现原理是采用动态代理的机制,所以 ...