• 下载两个依赖
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 #626 (Div. 2)

    Contest Info Practice Link Solved A B C D E F 4/6 O Ø Ø  Ø  Ø  - O 在比赛中通过 Ø 赛后通过 ! 尝试了但是失败了 - 没有尝试 S ...

  2. 阅读笔记:Item-based Collaborative Filtering Recommendation Algorithms

    概要: 推荐系统通过信息获取技术解决在线的个人的消息.产品或者服务的推荐问题.这些系统,特别是基于k临近协同过滤算法,在网络上取得了广泛的成功.可用信息和访问人数的巨大增加成了推荐系统一个难题.基于商 ...

  3. POJ1113:Wall (凸包算法学习)

    题意: 给你一个由n个点构成的多边形城堡(看成二维),按顺序给你n个点,相邻两个点相连. 让你围着这个多边形城堡建一个围墙,城堡任意一点到围墙的距离要求大于等于L,让你求这个围墙的最小周长(看成二维平 ...

  4. Gym 101485 E Elementary Math 网络流 或者 二分图

    题意: 输入一个n,后面输入n行,每一行两个数a.b.你可以对a.b进行三种操作:+.-.* 你需要保证对每一行a.b选取一个操作得到一个结果 你要保证这n行每一个式子选取的操作之后得到的结果都不一样 ...

  5. poj3585 Accumulation Degree(树形dp,换根)

    题意: 给你一棵n个顶点的树,有n-1条边,每一条边有一个容量z,表示x点到y点最多能通过z容量的水. 你可以任意选择一个点,然后从这个点倒水,然后水会经过一些边流到叶节点从而流出.问你最多你能倒多少 ...

  6. Codeforces Round #603 C. Everyone is a Winner!

    题意:给你一个整数n,求所有n/k的值(k∈{1,2,3...,n,.......}). 题解:最简单的方法是用枚举1~sqrt(n),把除数和商放进set中,就能直接水过,但后来看其他人的题解了解到 ...

  7. tkinter 实现爬虫的UI界面

    使用python的内置模块tkinter编写了爬取51Ape网站(无损音乐的百度云链接)的UI界面 tkinter入门简单, 但同时在编写的过程中因为文档的缺少很不方便. 下面是UI界面模块的编写,由 ...

  8. 3.PowerShell DSC核心概念

    PowerShell DSC有三个核心概念 配置 配置是声明性的PowerShell 脚本,用于定义和配置资源实例. DSC 配置是幂等的. 资源 资源是 DSC 的"实现器"部分 ...

  9. conda 命令笔记

    1.虚拟环境 conda -V # 查看当前conda 版本 conda update conda # 更新conda conda env list 查看当前已有的虚拟环境 conda create ...

  10. OpenStack Train版-4.安装placement放置服务

    安装placement放置服务 创建placement数据库 mysql -uroot CREATE DATABASE placement; GRANT ALL PRIVILEGES ON place ...