Vue实现在前端导出Excel 方法2
也可以去看下我的方法1:https://www.cnblogs.com/yingyigongzi/p/10915382.html
-------------------------------------------------------
vue-json-excel:https://github.com/jecovier/vue-json-excel
参考:https://www.cnblogs.com/zengjielin/p/9667476.html
npm安装依赖包
cnpm install --save 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,注意多个词组组成的属性名要加双引号
- 如果需要自定义导出的数据,可以定义回调函数。
<template>
<div>
<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>
</div>
</template>
<script>
// 参考:https://www.cnblogs.com/zengjielin/p/9667476.html
// cnpm install --save vue-json-excel
export default {
name:'',
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 "
}
]
] }
} }
</script>
<style scoped> </style>
Vue实现在前端导出Excel 方法2的更多相关文章
- Vue实现在前端导出Excel 方法1
也可以去看我的方法2:https://www.cnblogs.com/yingyigongzi/p/10915403.html ------------------------------------ ...
- vue项目,前端导出excel
今天研究一下前端如何导出excel,边查边实践,边记录 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还涉及不少二进制的东西 file-saver:ES5新增了相关 ...
- 前端导出Excel兼容写法
今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...
- 踹掉后端,前端导出Excel!
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一个下载链接,但有时候我们只想导出前端页面上已经有了的数据,不想再调后端导出接口浪费服务器资源,学习本文demo例子,我们踹掉后端,直接在前 ...
- .Net MVC 导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) 通过MVC控制器导出导入Excel文件(可用于java SSH架构)
.Net MVC 导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) [原文地址] 通过MVC控制器导出导入Excel文件(可用于java SSH架构) public cl ...
- C# Datatable导出Excel方法
C# 导出Excel方法 先引用下System.IO;System.data; 具体函数如下: public static bool ExportCSV(DataTable dt, string f ...
- 前端导出excel表
前端导出excel表 方式一: 前端js实现 : https://www.cnblogs.com/zhangym118/p/6235801.html 方式二: java后端实现: https://bl ...
- 前端导出Excel
1.首先,需要下载一个叫better-xlsx,的插件,以yarn 为例 ' yarn add better-xlsx --save '下载相关依赖包( npm 方式 ' npm i better-x ...
- js前端导出excel
此例子是利用html特性,纯前端导出excel,样式不好看,兼容主流浏览器. var tableid = jQuery(this).closest("div.tab-label-wrap&q ...
随机推荐
- 「CF505E」 Mr. Kitayuta vs. Bamboos
「CF505E」 Mr. Kitayuta vs. Bamboos 传送门 如果没有每轮只能进行 \(k\) 次修改的限制或者没有竹子长度必须大于 \(0\) 的限制那么直接贪心就完事了. 但是很遗憾 ...
- flex布局制作自适应网页
网页布局是css的一个重点应用.传统的布局都是依赖display.position.float属性来实现的,但是特殊布局就不易实现,如垂直居中. 01 flex布局是什么? Flex 是 Flexi ...
- 家庭账本开发day03
今天在编写form表单提交时遇到很多问题,在向servlet提交请求时找不到资源, 在网上查找学习了相关的信息,找到原因,添加注解或者配置xml文件的相关映射 解决问题.成功完成了账单添加的功能.
- python爬取北京政府信件信息02
在爬取详细信息页面中,又遇到了问题,就是标签内的信息爬取,用re的正则表达式没有找到解决办法,只能又去网上搜索解决办法 用bs4来解决,用 soup = BeautifulSoup(text,&quo ...
- Windows内核开发-3-内核编程基础
Windows内核开发-3-内核编程基础 这里会深入讲解kernel内核的API.结构体.和一些定义.考察代码在内核驱动中运行的机制.最后把所有知识合在一起写一个有用的驱动. 本章学习要点: 1:通用 ...
- 在SublimeText3中搭建Verilog开发环境记录(一)
------------恢复内容开始------------ ------------恢复内容开始------------ ## 前言 *工欲善其事,必先利其器* 一款好用的撸码软件,能够大大的提高工 ...
- javascript学习笔记-(三)
ES6标准新增了一种新的函数:Arrow Function(箭头函数) 案例: 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: ...
- 纯C语言(C89)实现简单链表
起因 工作很少接触纯C项目,业余写着玩玩,不断雕琢 目标 纯C实现简单链表,提供方便易用泛型接口,避免依赖 实现 完全封装,隐藏结构体细节,不支持栈创建 拷贝存储,轻微性能代价换来易用性 list.h ...
- Python -- 长字符串
如果需要写一个非常非常长的字符串,它需要跨多行,那么,可以使用三个引号代替普通引号. print '''This is a very long string. It continues here. A ...
- tomcat与springmvc 结合 之---第19篇(下,补充) springmvc 加载.xml文件的bean标签的过程
writedby 张艳涛,上一篇写了springmvc对<mvc:annoXXXX/>标签的解析过程,其实是遗漏重要的细节,因为理解的不深入吧 今天接着解析<bean>标签 & ...