vue导出excel表格(详细教程)
在开发的时候,会经常用的导出excel表格功能,刚好自己开发有遇到,就记录一下
一、安装vue-json-excel
npm install vue-json-excel -S
二、main.js中引入
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
三、在代码中使用
<template><download-excelclass="export-excel-wrapper":data="DetailsForm":fields="json_fields":header="title"name="需要导出的表格名字.xls"><!-- 上面可以自定义自己的样式,还可以引用其他组件button --><el-button type="success">导出</el-button></download-excel></template>
四、数据
DetailsForm:需要导出的数据
title:表格标题
json_fields:里面的属性是excel表每一列的title,用多个词组组成的属性名(中间有空格的)要加双引号; 指定接口的json内某些数据下载,若不指定,默认导出全部数据中心全部字段
<script>
title: "xx公司表格",json_fields: {"排查日期":'date',"整改隐患内容":'details',"整改措施":'measure',"整改时限":'timeLimit',"应急措施和预案":'plan',"整改责任人":'personInCharge',"填表人":'preparer',"整改资金":'fund',"整改完成情况":'complete',"备注":'remark',},DetailsForm: [{date: "2022-3-10",details: "卸油区过路灯损坏",measure: "更换灯泡",timeLimit: "2022-3-21",plan: "先使用充电灯代替,贴好安全提醒告示",personInCharge: "王xx",preparer: "王xx",fund: "20元",complete: "已完成整改",remark: "重新更换了灯泡",},],
</script>
五、效果
六、一些常用参数
vue导出excel表格(详细教程)相关推荐
- vue导出Excel表格全局函数(简洁明了)
vue导出excel全局函数(简洁明了) 将导出到Excel功能封装成一个公用js函数,供其他vue页面复用. 1.安装Excel插件 npm install --save xlsx file-sav ...
- java中使用jxl导出Excel表格详细通用步骤
该方法一般接收两个参数,response和要导出的表格内容的list. 一般我们将数据库的数据查询出来在页面进行展示,根据用户需求,可能需要对页面数据进行导出. 此时只要将展示之前查询所得的数据放入s ...
- vue导出excel表格vue-json-excel(最新超容易详细教程)
最近写一个报名的小程序后台,需要导出页面表格为excel,实现这个功能所以记录一下: 目前大多数采取的都是 xlsx ,我这里使用的是vue-json-excel,相对来说更容易上手实现效果. 安装依 ...
- 【vue开发】vue导出Excel表格教程demo
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...
- vue导出excel表格并支持样式、行高修改xlsxxlsx-style
前言 使用插件xlsx.xlsx-style导出带有样式的表格,两者都可以实现创建excel,但是xlsx免费版仅仅只能做单元格合并,收费版才能设置单元格样式,所以需要用到xlsx-style插件实现 ...
- JXLS导出Excel表格实战教程
超级好用Excel导出工具之JXLS 简介 引入JXLS maven依赖 XLS Area定义标记 each 命令是最经常使用的XLS命令 单元格合并命令 JXLS导出实战 模板导出Excel的工具 ...
- vue 导出excel表格 自定义表结构
1.安装插件 npm install js-xlsx file-saver -S npm install script-loader -S -D //它帮我们挂载了,不需要引入到main.js里面 j ...
- vue导出excel表格,使用xlsx-style自定义字体样式,字体颜色,合并单元格,单元格填充色
一.需要依赖 npm install xlsx-style --save "^0.8.13" npm install xlsx --save "^0.18.5" ...
- vue 导出excel表格 xlsx文件
1 下载 xlsx 插件 npm install -S file-saver xlsx,npm install -D script-loader , //下载这两个 2.下载Blob.js.Expor ...
- Vue 导出Excel表格,并实现合并单元格方法
安装依赖 xlsx , file-saver , script-loader 下载Export2Excel.js文件 在src下创建目录vassets/Export2Excel.js 下载好的: /* ...
最新文章
- JDK容器学习之ArrayList:底层存储和动态扩容
- 浏览器中Javascript的加载和执行
- python读取mtcars数据集并实现以下操作_Python可视化43 | plotnine≈R语言ggplot2,43plotnineR...
- Powershell查看AD 组成员的变化
- 图像化转向名词解释_遥感——数字图像处理名词解释及简单整理
- 太快了,太变态了:什么会影响Java中的方法调用性能?
- 图测试题部分总结.ing
- 公钥,私钥和数字签名这样理解轻松入门!
- arduino COM口被占用问题解决
- Drupal常用开发工具(一)——Devel模块
- 熟悉HBase基本操作
- java主函数_《左手 Java 右手 Python 》之 Java 的安装与初识(1)
- 题解 P2146 【[NOI2015]软件包管理器】
- php loop循环 拿到键名
- 字典哈希表的实现原理_字典哈希表的实现原理
- 苹果手机密码锁如何解锁
- Ubuntu设置截图快捷键
- python dataframe 增加一行
- 学习Windows Phone 8开发资料汇总
- 设计模式 -- 门面模式