vue---EleElement UI 表格导出功能

步骤一：安装依赖

安装依赖：npm install --save xlsx file-saver

步骤二：在放置需要导出功能的组件中引入相关组件

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

步骤三：给table设置一个id

HTML中的设置，简单来说就是给需要导出的table标签el-table上加一个id：如exportTable，对应下面的exportExcel方法中的 document.querySelector('#exportTable')

步骤四：写method

在methods中设置真正实现导出转换excel表格的方法:

exportExcel () {/* generate workbook object from table */var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)/* 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' }), 'fileName.xlsx')} catch (e) {if (typeof console !== 'undefined') {console.log(e, wbout)}}return wbout
}

注意：

在表格中的数字为百分比或者是其他的，在到处的时候会进行处理变成小数，或者科学计数法，这个就需要集啊让xlsxParam这个字段，让导出不做格式转换，这样就能够你的table中是什么，导出就是什么
可以导出表格的，但有个问题是导出的数据是重复的，这个是因为你的表格有列使用了fixed属性，element-ui的table使用了fixed属性固定列，导出表格时会出现导出两次的问题，是因为在table中有两个table标签，我们可以通过代码解决这个问题，注意代码中拷贝了一个table元素，否则直接删除会删除页面中的表格

这个时候我们可以改良一下我们的代码：

exportExcel () {/* generate workbook object from table */var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换var table = document.querySelector('#exportTab').cloneNode(true)table.removeChild(table.querySelector('.el-table__fixed')) //这里是双下划线var wb = XLSX.utils.table_to_book(table, xlsxParam)/* 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' }), 'fileName.xlsx')} catch (e) {if (typeof console !== 'undefined') {console.log(e, wbout)}}return wbout
}

这个时候我们在点击下载，就能够正常实现功能了

抓紧试一下吧~~~~~

转载于:https://www.cnblogs.com/charles8866/p/11303397.html

vue---EleElement UI 表格导出功能相关推荐

java导出表功能_表格导出功能实践
表格导出分为静态导出与动态导出. 静态导出是将当前已经渲染的表格项导出为指定的格式,可为.xls或.cvs.这种导出无需后端支撑,完全由前端实现. 动态导出是通过将参数传与后端接口,该接口负责生成Bl ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
Jxls表格导出功能帮助文档
Jxls表格导出功能帮助文档业务介绍功能实现业务介绍做一个时刻表的导出功能,数据模型都已经写好了.原型图大概是这样的一个意思.先看图: 大概设计是这个样子. 然后最后导出的成品是这个样子: 大 ...
VUE的Excel导入导出功能
在做人力资源管理的后台项目时,实现了excel表的导入导出功能.用到了vue-element-admin提供的框架(链接地址 ),我们只需要在自己的项目中封装改造即可. 项目中实现excel表的导入与 ...
linux脚本的数据输出到excel,使用shell实现Excel表格导出功能 | 剑花烟雨江南
在Web项目中,我们经常会遇到Excel表格导出的功能,对于一些数据实时性要求不高的.逻辑相对简单的导出,是否可用通过shell脚本的方式来进行导出,从而降低开发成本呢? 我们都知道,CSV格式可以用 ...
vue中table表格导出为图片格式
vue中table表格点击下载为图片格式实现思路:给页面中需要导出为图片的内容添加id名,调用封好的方法即可直接导出.以下是具体的实现方法 1.安装依赖 npm install --save htm ...
vue 实现 excel 的导出功能
一后端代码 1 创建 excel 的导出实体 package com.baiyee.sdgt.vo.cmn;import com.alibaba.excel.annotation.ExcelProp ...
vue 使用Export2Excel实现表格导出功能
vue 使用Export2Excel上传和导出excel表格 https://www.jianshu.com/p/257d6d23f85d 前端导出excel☞js-xlsx实现合并单元格 https ...
vue 实现简单表格分页功能
使用框架实现表格展示和跳转功能,一直不懂原理.所以自己写一个简单的,加深理解. 布局分为2块,上面是表格展示数据,下面是点击按钮跳转. 效果图: 代码: <!DOCTYPE html> & ...
Table 表格导出功能
<Card class="clearfix"><p slot="title"><Icon type="ios-list& ...

vue---EleElement UI 表格导出功能

vue---EleElement UI 表格导出功能相关推荐

最新文章

热门文章