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

    参考地址:文件地址

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

  • 在vue文件中使用

    引入文件:

  1. import {
  2. export_json_to_excel
  3. } from '@/plugins/Export2Excel'

​ 点击按钮时导出文件

  1. <a-button @click="exportExcel">导出</a-button>
  2. exportExcel() {
  3. const excelHeader = this.columns.map(item => item.title)
  4. const keys = this.columns.map(item => item.dataIndex)
  5. const excelData = this.dataSource.map(item => keys.map(i => item[i] || ''))
  6. const excelName='人员信息表'
  7. export_json_to_excel(excelHeader, excelData, excelName)
  8. },
  • 对于export_json_to_excel()中几个变量的解释

    1. excelHeader为导出数据的表头
    2. excelHeader=['年龄','性别','姓名']
    1. excelData为导出的数据
    2. excelData=[
    3. [16,'男','tom'],
    4. [17,'男','jim'],
    5. [12,'男','jon'],
    6. [16,'男','king']
    7. ]
    8. //数据的顺序与表头一致
    1. 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. Fiddler+雷电模拟器进行APP抓包

    1.下载最新版Fiddler,强烈建议在官网下载:https://www.telerik.com/download/fiddler 2. 正常傻瓜式安装,下一步,下一步,安装完毕后,先不用急于打开软件 ...

  2. Codeforces Round #531 (Div. 3) B. Array K-Coloring (结构体排序)

    题意:给你\(n\)个数字,用\(k\)种颜色给他们涂色,要求每个数字都要涂,每种颜色都要用,相同的数字不能涂一样的颜色. 题解:用结构体读入每个数字和它的位置,然后用桶记录每个数字出现的次数,判断是 ...

  3. Entity Framework (EF) Core学习笔记 1

    1. Entity Framework (EF) Core 是轻量化.可扩展.开源和跨平台的数据访问技术,它还是一 种对象关系映射器 (ORM),它使 .NET 开发人员能够使用面向对象的思想处理数据 ...

  4. Kubernets二进制安装(19)之集群平滑升级

    在实际生产环境中,部署好的集群稳定就行了,但是,如果需要使用到新的功能或当前版本出现了严重的漏洞,都建议做升级,本教程是将node节点从v1.15.10版本平滑升级到v1.15.12版本,如果升级到相 ...

  5. python = 赋值顺序 && C++ side effect

    title: python = 赋值顺序 && C++ side effect date: 2020-03-17 15:00:00 categories: [python][c++] ...

  6. 宝塔面板&FLASK&centos 7.2 &腾讯云 配置网站出现的若干问题

    1.解决跨域问题&&中文显示问题 from flask import Flask, url_for, request, render_template, redirect from f ...

  7. 白日梦的ES笔记三:万字长文 Elasticsearch基础概念统一扫盲

    目录 一.导读 二.彩蛋福利:账号借用 三.ES的Index.Shard及扩容机制 四.ES支持的核心数据类型 4.1.数字类型 4.2.日期类型 4.3.boolean类型 4.4.二进制类型 4. ...

  8. shit vuepress docs

    shit vuepress docs https://deploy-preview-2764--vuepress.netlify.app/guide/directory-structure.html ...

  9. ::-webkit-scrollbar & hidden scrollbar

    ::-webkit-scrollbar & hidden scrollbar how to hidden ::-webkit-scrollbar *::-webkit-scrollbar { ...

  10. HTML5 Canvas 画图组件 All In One

    HTML5 Canvas 画图组件 All In One Canvas SVG Canvas + SVG refs https://www.infoq.cn/article/1BVg9VDSmqyHv ...