vue + element中el-table导出excel

第一步:
安装依赖：

npm install --save xlsx file-saver

这里安装了两个依赖插件，感兴趣的读者可以去点开下面的链接，查看源码：
https://github.com/SheetJS/js-xlsx
https://github.com/eligrey/FileSaver.js
第二步：
引入使用：
在你需要导出excel的vue组件里面引入，引入方式如下：

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

第三步：
在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},

注意事项：
上述代码中有一个#out-table,实际上就是你要导出的table的id，命名随意，示例如下：

<el-table :data="pageData.records" style="width: 100%" v-loading="loading" id="out-table">

上述代码中还有一个sheetjs.xlsx，这个就是你导出的excel文件的名称，读者可以自行修改名称。
第四步：
通过点击事件执行exportExcel ()方法。
读者可以通过按钮点击事件，绑定上述方法，点击后就会自动导出excel文件。
导出文件后，若文件中有####或者科学计算法的数字，不要慌张，那是因为该数据的表格宽度太小了，直接鼠标调整excel中的表格宽度来查看就可以。

如有疑问可留言，喜欢的读者可关注博主——小圣贤君

vue + element中el-table导出excel相关推荐

vue+element实现导入和导出excel
自己最近在做一个地图的项目,需要导入excel的相关数据,处理为json之后通过接口发给strapi,网上也查看了许多资料,想借助这个机会也整理一下如何实现该功能引入工具库 npm install ...
VUE项目中实现表格导出EXCEL表格
一步步照着做实现前端导出表格第一:安装依赖 npm install -S file-saver xlsx npm install -D script-loader 第二:在目录里新建excel文件夹 ...
在vue中把数据导出Excel文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...
vue使用js-table2excel将数据导出Excel表格,含文字、图片类型, 设置表格样式/添加合并单元格
最近项目遇到了一个需求,在后台将学生信息以Excel表格导出,学生信息包含姓名.联系电话.照片等信息,一般情况下信息导出只需要导出字符串类型,但是现在的导出内容包含了图片,于是百度看到了js-tabl ...
springboot中使用poi导出excel文件(亲测实现了第一个功能)
1.POI简介 Jakarta POI 是一套用于访问微软格式文档的Java API. 组件HWPF用于操作Word的; 组件HSSF用于操作Excel格式文件. 2.常用组件 HSSFWorkboo ...
vue+iView实现导入与导出excel功能
vue+iView实现导入与导出excel功能一,需求: 1,导入导出的必要性导入与导出在日常项目开发中经常用到, 批量导入功能可以快速插入添加数据. 导出功能则可方便直观明了拿到所需展示的重要数 ...
转HTML中的table转为excel
转换html 中的table 为excel,firefox浏览器支持,代码如下 <%@ page language="java" contentType="text ...
Winform中通过NPOI导出Excel时通过ICellStyle和IDataFormat格式化日期显示格式
场景 Winform中通过NPOI导出Excel的三种方式(HSSFWorkbook,XSSFWorkbook,SXSSFWorkbook)附代码下载: https://blog.csdn.net/B ...
Winforn中通过NPOI导出Excel时通过XSSFClientAnchor和XSSFPicture添加图片
场景 Winform中通过NPOI导出Excel的三种方式(HSSFWorkbook,XSSFWorkbook,SXSSFWorkbook)附代码下载: https://blog.csdn.net/B ...
Yii框架中使用PHPExcel导出Excel文件
Yii框架中使用PHPExcel导出Excel文件http://www.cnblogs.com/wgx214/p/3709521.html 转载于:https://www.cnblogs.com/fl ...

vue + element中el-table导出excel

vue + element中el-table导出excel相关推荐

最新文章

热门文章