• 下载两个依赖
npm install file-save xlsx
  • 创建两个文件 Blob.jsExport2Excel.js

    参考地址:文件地址

  • Export2Excel.js中修改引入地址,注意地址的路径,没有script-loader依赖的话就去 npm install script-loader -D下载该依赖

  • 在vue文件中使用

    引入文件:

  import {
​ export_json_to_excel
} from '@/plugins/Export2Excel'

​ 点击按钮时导出文件

<a-button @click="exportExcel">导出</a-button>

exportExcel() {
const excelHeader = this.columns.map(item => item.title) const keys = this.columns.map(item => item.dataIndex) const excelData = this.dataSource.map(item => keys.map(i => item[i] || ''))
const excelName='人员信息表'
export_json_to_excel(excelHeader, excelData, excelName) },
  • 对于export_json_to_excel()中几个变量的解释

    excelHeader为导出数据的表头
    excelHeader=['年龄','性别','姓名']
    excelData为导出的数据
    excelData=[
    [16,'男','tom'],
    [17,'男','jim'],
    [12,'男','jon'],
    [16,'男','king']
    ]
    //数据的顺序与表头一致
    excelName:表的名字

vue导出数据excel的更多相关文章

  1. 导出数据excel表--身份证号后三位是0--〉还原

    导出数据excel表的身份证号后三位是0,怎么办? 数据导出前,在身份证号前加任意符号即可 例如: 结果

  2. PB导出数据excel格式dw2xls

    PB导出数据excel格式dw2xls 使用DW2XLS控件 语法 uf_save_dw_as_excel ( dw, filename ) 參数 dw A reference to the data ...

  3. java导出数据EXCEL的工具类(以spring-webmvc-4.0.4jar为基础)

    1.本工具类继承于  spring-webmvc-4.0.4jar文件心中的一个类   AbstractExcelView 2.代码如下 package com.skjd.util; import j ...

  4. 用MYSQLworkbench导出数据excel

    步骤: 1.先从数据库中将表导出,右键需要导出的表格——>Table Data Export Wizard 2.点击Next,选择你需要把数据存放的文件路径.导出的数据格式(表格的话就默认选择C ...

  5. Excel导出数据Excel.Application组件权限设置方法

    很多网络应用系统都会涉及到数据采用Excel方式导出的模块,部分朋友问我到底怎么弄,其实方式很多种,目前比较优秀的方式还是直接用Excel的Excel.Application方式比较合适. 采用Exc ...

  6. java导出数据Excel总结

    //创建获取到JFileChooser的文件名的JTextField public JTextField getTextField(Container c){ JTextField textField ...

  7. 【js-xlsx和file-saver插件】前端导出数据到excel

    最近在做项目,前端进行处理数据,导出excel中,还是遇到不少问题,这里将其进行总结一下,博主是vue框架开发,借用file-saver和xlsx插件进行导出excel,我们来看下代码和效果.地址链接 ...

  8. vue中把table导出表格excel

    1.首先下载2个js,我的百度网盘有 2.安装依赖 npm install -S file-saver xlsx(这里其实安装了2个依赖) npm install -D script-loader 3 ...

  9. vue 导出excel表格

    对于涉及到数据比较多的管理后台导出excel 表格这个需求就非常的常见了 所以? vue 怎么到处excel表格的? 有两种办法 1:请求接口后台直接给你的是excel文件,你需要做的就是怎么接收ex ...

随机推荐

  1. Codeforces Round #687 (Div. 2, based on Technocup 2021 Elimination Round 2) D. XOR-gun (二进制,异或,前缀和)

    题意:给你一组非递减的数,你可以对两个连续的数进行异或,使其合并为一个数,问最少操作多少次使得这组数不满足非递减. 题解:首先,给出的这组数是非递减的,我们考虑二进制,对于三个连续的非递减的最高位相同 ...

  2. Codeforces Round #670 (Div. 2) A. Subset Mex (贪心)

    题意:给你一长度为\(n\)的序列,将其分为两个集合,求两个集合中未出现的最小元素的最大值, 题解:用桶存一下每个元素的个数,两次枚举\([1,100]\),找出两个最小值即可. 代码: int t; ...

  3. Codeforces Global Round 9 A. Sign Flipping (构造)

    题意:有一个长度为\(n\)(odd)的序列,可以更改所有的数的正负,要求最少\(\frac{n-1}{2}\)个\(a_{i+1}-a_i\ge0\),并且要求最少\(\frac{n-1}{2}\) ...

  4. codeforces 1059C. Sequence Transformation【构造】

    题目:戳这里 题意:有1,2,3...n这n个数,求一次这些数的gcd,删去一个数,直到剩下一个数为止.输出这n个gcd的最大字典序. 解题思路:一开始的gcd肯定是1,要让字典序最大,我们可以想到下 ...

  5. webpack4.0源码解析之打包后js文件分析

    首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件(一个主入口文件和一个非主入口文件)和一个html文件,package.json,webpack.config. ...

  6. Java中的Lambda匿名函数后续

    函数式编程(函数式接口):一个接口只包含一个方法实现 public interface Lambda{ void method(); } // 调用 Lambda lambda = new Lambd ...

  7. 最新 Apple iPhone 12 价格 All In One

    最新 Apple iPhone 12 价格 All In One 美版价格 Apple iPhone 12 mini $699 Apple iPhone 12 $799 Apple iPhone 12 ...

  8. GitHub rename the default branch from master to main

    GitHub rename the default branch from master to main master => main Repository default branch Cho ...

  9. React Hooks 实现一个计时器组件

    React Hooks 实现一个计时器组件 useEffect https://reactjs.org/docs/hooks-reference.html#useeffect import React ...

  10. Web 全栈开发 Redis 面试题

    Web 全栈开发 Redis 面试题 Redis 大 key 问题 https://www.cnblogs.com/xgqfrms/p/13601959.html Redis 数据结构 Redis 初 ...