https://blog.csdn.net/u010427666/article/details/79208145

vue2.0 + element UI 中 el-table 数据导出Excel
1、 安装相关依赖

主要是两个依赖

npm install --save xlsx file-saver
1
如果想详细看着两个插件使用,请移步github。

https://github.com/SheetJS/js-xlsx
https://github.com/eligrey/FileSaver.js

2、组件里头引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3、组件methods里写一个方法

 exportExcel () {
/* generate workbook object from table */
var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
/* get binary string as output */
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
return wbout
},
---------------------

  

注意:XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ,sheetjs.xlsx 即为导出表格的名字,可修改!

4、点击导出按钮执行 exportExcel 的方法即可 。

element ui table 导出excel表格的更多相关文章

  1. ASP如何将table导出EXCEL表格

    网页导出excel表格非常常用,对于一些加载<table>的数据网页,经常会用到这种功能,下面和大家分享一下ASP如何导出EXCEL表格 工具/原料   ASP编辑器 方法/步骤     ...

  2. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  3. vue+element UI如何导出excel表

    导出excel表应按如下规则 首先要先安装如下依赖 npm install --save xlsx npm install --save file-saver 接下在在你的代码中去引用这两个 impo ...

  4. vue2.5 + element UI el-table 导出Excel

    安装依赖 npm install --save xlsx file-saver 新建excelHelper.js \src\utils\目录下新建excelHelper.js文件 import Vue ...

  5. 原生JavaScript 导出excel表格(兼容ie和其他主流浏览器)

    因同事的需求是想前端导出excel表格,网上找了一些demo,自己修改了一下,可能以后会用到,记录下来吧,兼容ie和一些主流浏览器,ie可能会报错,原因参考 这里,edge 浏览器还没有办法导出,正在 ...

  6. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  7. Element-ui组件库Table表格导出Excel表格

    安装npm install --save xlsx file-saver 两个插件的详细地址在下面 https://github.com/SheetJS/js-xlsxhttps://github.c ...

  8. .NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格

    一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...

  9. js导出Excel表格

    js导出Excel表格 直接上代码: 红色部分:如果表格数据中有“1/1”这样的值,会在导出的Excel中转化为日期“1月1日”,所以才加上了红色那两句.如果返回值中没有这样的格式,红色部分可以不写. ...

随机推荐

  1. VS2017 配置ImageMagick

    以下配置仅供参考,我配置完了怎样都用不了... 直接下载源码使用VS进行编译. 源码下载地址:http://imagemagick.org/script/install-source.php#wind ...

  2. 安装 powerline

    使用说明: https://powerline.readthedocs.io/en/latest/usage.html ~ vim,在 .vimrc 中添加配置 set rtp+=/usr/lib/p ...

  3. 难以接受你的改变:从project.json到.csproj

    自从微软做了一个艰难的决定——.NET Core彻底放弃project.json,全面改回.csproj——至今,虽然赞美之声不断,但我依然不喜欢也难以接受这样的改变. 难以接受主要有两方面的原因: ...

  4. python web篇 创建数据库

    python3 manage.py migrate ls sqlite3 使用单文件数据库,管理方便 运行测试 python manage.py runserver 输入http://127.0.0. ...

  5. bc https://en.wikipedia.org/wiki/Gossip_protocol

    分布式容错性:分布式网络极其鲁棒,能够容忍部分节点的异常状态: 不可篡改性:一致提交后的数据会一直存在,不可被销毁或修改: 隐私保护性:密码学保证了数据隐私,即便数据泄露,也无法解析. 随之带来的业务 ...

  6. EF Code First模型约束

    总之,EF比较复杂.如果不想深究,建议简单用用.基本对应就行,大项目标准开发还是ModelFirst(先建立DB各种约束),然后再c#类约束.定义. 当然写原型时用ef很快.

  7. Java 输入/输出——处理流(RandomAccessFile)

    RandomAccessFile是Java输入/输出流体系中功能最丰富的文件内容访问类,它提供了众多的方法来访问文件内容,它既可以读取文件内容,也可以向文件输出数据.与普通的输入/输出流不同的是,Ra ...

  8. [development][http][libhtp] suricata的http库--libhtp

    首先,从文档来看, 它支持管道化的http, 也可以说过于重量级. 其次, 还没有达到产品化的稳定性. 并不是完全对应我的需求, http模块是一个整体性能相关模块. 应该按需定制更合理. 但是,功能 ...

  9. Flink – JobManager.submitJob

    JobManager作为actor, case SubmitJob(jobGraph, listeningBehaviour) => val client = sender() val jobI ...

  10. ms sql server,oracle数据库实现拼接一列的多行内容

    项目中要将查询出的一列的多行内容拼接成一行,如下图:ypmc列. ms sql server: 网上查到相关资料如下:http://blog.csdn.net/rolamao/article/deta ...