vue-json-excel是一个专门为解决前端导出Excel而开发的一个组件库。

个人认为，导出在前端做，不是特别合适，最好是后端提供导出下载文件接口，如果后端确实不想提供接口，要让你做前端导出，那么不妨试试这个组件。

一、安装依赖

二、引入配置

三、组件属性说明

四、导出HTML代码

五、导出逻辑代码

六、最终导出结果展示

七、使用该组件需要注意的点

一、安装依赖

npm install vue-json-excel

二、引入配置

import Vue from "vue";
import JsonExcel from "vue-json-excel";Vue.component("downloadExcel", JsonExcel);

三、组件属性说明

四、导出HTML代码

<div style="float: right; padding-right: 4px; margin-bottom: 30px"> <download-excel class="export-excel-wrapper1" :fields="json_fields" title="导出各单位统计数据" :data="json_data" :name="dwtjsjName" :before-generate="startDownload"> <el-button size="mini" style="right: 140px; position: absolute">导出各单位统计数据</el-button> </download-excel> </div>

五、导出逻辑代码

<script>export default {name: "name",data() {return {json_fields: {序号: "ID",学校: "yyname",刷卡人数: "total",绿码人数: "greenNum",黄码人数: "yellowNum",红码人数: "redNum",未接种数: "ymzzNoNum",已接种数: "ymzzIsNum",开始时间: "startDate",结束时间: "endDate",},json_data: [], //导出表格数据dwtjsjName: "",};},methods: {async startDownload() {this.$modal.msgSuccess("文件正在下载中,请稍后...");this.dwtjsjName = "各单位统计数据.xls";await queryHealthCountData(data).then((response) => {let res = response.data;console.log(res);for (var i = 0; i < res.length; i++) {res[i].ID = i + 1;}this.json_data = res;return res;});}},};</script>

六、最终导出结果展示

七、使用该组件需要注意的点

总体来说，组件用法还是蛮简单的，如果需要动态加载数据然后导出，这里一般需要先调用接口获取数据，这里需要注意的地方就是，使用before-generate回调函数进行下载前的数据加载，这里调用的方法需要进行异步处理（async....await),否则下载的数据会是一个空Excel。

vue-json-excel前端导出excel教程相关推荐

vue+elementui表格前端导出excel以及自定义导出样式
vue+elementui表格前端导出excel以及自定义导出样式项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊.可没想到导出竟然也要前端自己来弄,于是乎请 ...
Vue实现在前端导出Excel
安装依赖进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...
前端导出excel插件vue-json-exce
前端导出excel 前端导出excel无需请求接口,需用第三方插件vue-json-exce 一.下载插件 npm install vue-json-excel -S 二.在main.js引入 imp ...
vue导出excel加一个进度条_Vue实现在前端导出Excel
安装依赖进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...
js vue 设置excel单元格样式_vue项目使用xlsx-style实现前端导出Excel样式修改（添加标题，边框等），并且上传npm踩坑记录...
前段时间,我们项目提出一个前端导出Excel表格的需求, 这个很简单,利用xlsx,file-saver很容易实现(网上很多教程). 后来需要加入标题,标题居中显示,加入边框等等样式需求,这就给我很多 ...
前端导出excel自定义样式(行高除外)
前端导出excel需要用到的依赖有xlsx.xlsx-style import XLSX from 'xlsx'; import XLSXStyle from 'xlsx-style'; npm in ...
uniapp 前端导出excel
需求:app前端导出excel,不需要后台参与方案1:用付费插件(Android读取excel或导出数据到Excel表 - DCloud 插件市场)实操确实可以用,可以设置各种属性,比较齐全方案2 ...
xlsx模块前端_利用xlsx-syle前端导出excel且支持自定义样式
利用xlsx-syle前端导出excel且支持自定义样式前言本文的代码是基于react的. 本文仅用于记录我在前端导出excel遇到的问题的笔记整理. 需求描述需要前端来实现对数据的导出,导出成 ...
excel导出_学习笔记—— 前端导出excel
这两天工作上来了两个需求,一个是打印的功能,一个是导出的功能.功能其实之前已经做出来了,打印我用的是printjs的插件,excel用的是Export2Excel.js,但是产品要求打印页面和导出的e ...

vue-json-excel前端导出excel教程

一、安装依赖

二、引入配置

三、组件属性说明

四、导出HTML代码

五、导出逻辑代码

六、最终导出结果展示

七、使用该组件需要注意的点

vue-json-excel前端导出excel教程相关推荐

最新文章

热门文章