vue-json-excel导出excle表格
名称 |
类型 |
描述 |
默认值 |
---|---|---|---|
data |
Array |
要导出的数据。 |
|
fields |
Object |
您要导出的JSON对象中的字段。如果未提供,则将导出JSON中的所有属性。 |
|
export-fields (exportFields) |
Object |
用于解决其他使用变量字段的组件的问题,例如vee-validate。exportFields的工作原理类似于字段 |
|
type |
string |
MIME类型[xls,csv] |
xls |
name |
string |
要导出的文件名。 |
data.xls |
header |
string/Array |
数据标题。可以是一个字符串(一个标题)或一个字符串数组(多个标题)。 |
|
footer |
string/Array |
数据的页脚。可以是一个字符串(一个页脚)或一个字符串数组(多个页脚)。 |
|
default-value (defaultValue) |
string |
当行没有字段值时,用作备用。 |
|
worksheet |
string |
工作表选项卡的名称。 |
‘Sheet1’ |
fetch |
Function |
进行回调,以在下载之前获取数据(如果已设置),则在按下鼠标后以及下载过程之前立即运行。重要信息:仅在未定义数据属性的情况下有效。 |
|
before-generate |
Function |
在生成/获取数据之前回调以调用方法,例如:显示加载进度 |
|
before-finish |
Function |
在下载框弹出之前进行回调以调用方法,例如:隐藏加载进度 |
|
stringifyLongNum |
Boolean |
字符串化长整数和十进制(解决数字精度丢失的问题),默认值:false |
false |
escapeCsv |
Boolean |
这样可以转义CSV值,以解决数字字段中的一些excel问题。但这将用=“和”包裹每个csv数据,以避免您必须将此prop设置为false。默认值:True |
true |
安装
npm install vue-json-excel
组件导出
import JsonExcel from "vue-json-excel";
components: {
"download-excel": JsonExcel,
},
完整代码
<template>
<div class="box">
<download-excel
:fields="fields"
:data="tableData"
name="用户数据"
type="xls"
>
<el-button type="primary" icon="el-icon-download">导出表格</el-button>
</download-excel>
</div>
</template>
<script>
import JsonExcel from "vue-json-excel";
export default {
components: {
"download-excel": JsonExcel,
},
data() {
return {
tableData: [],
fields: {
日期: "date",
姓名: "name",
省份: "province",
市区: "city",
地址: "address",
邮编: "zip",
},
};
},
mounted() {
this.moreData();
},
methods: {
moreData() {
var list = [];
for (let i = 0; i < 50; i++) {
list.push({
date: "2016-05-02",
name: "王小虎" + i,
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200000,
});
}
this.tableData = list;
},
},
};
</script>
<style lang="less" scoped>
</style>
- Flash/Flex学习笔记(13):对象拖动(startDrag/stopDrag)
- 原来Silverlight 4中是可以玩UDP的!
- Flash/Flex学习笔记(12):FMS 3.5之如何做视频实时直播
- Flash/Flex学习笔记(11):如何检测摄像头是否被占用
- Flash/Flex学习笔记(10):FMS 3.5之Hello World!
- Swarm基于多主机容器网络-overlay networks 梳理
- 未来AI可能会淘汰180万个工作岗位,你感到恐惧了吗
- css基础:把所有背景图都集成在一张图片上,减少图片服务器请求次数
- Docker可视化界面(Consul+Shipyard+Swarm+Service Discover)部署记录
- windows 2008上启用防火墙后sqlserver 2005经常出现连接超时的解决办法
- 重温delphi之控制台程序:Hello World!
- Docker集中化web界面管理平台-Shipyard部署记录
- "Goole项目托管"及"CodePlex发布开源项目"要点
- Docker网络解决方案-Calico部署记录
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- GitHub标星1w+超牛的微服务项目,开发脚手架
- Redis中hash、set、zset的底层数据结构原理
- Redis中string、list的底层数据结构原理
- Redis中字符串的表示
- Redis分布式锁背后的原理
- 解析Transformer模型
- 这5个常问的Redis面试题你答得出来吗?(详细剖析)
- 性能最佳实践:MongoDB索引
- Python基本数据类型-list-tuple-dict-set
- 深度学习应用的服务端部署
- MongoDB中的CURD操作
- 高可用的Redis主从复制集群,从理论到实践
- SpringBoot实战(一):使用Lombok简化你的代码
- Kubernetes Ingress入门指南和实践练习
- [译]Go语言常用文件操作汇总