vue表格导出到Excel

步骤一：安装依赖

npm install --save xlsx file-saver

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

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

步骤三：给table设置一个id

HTML中的设置，简单来说就是给需要导出的table标签el-table上加一个id：如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
}

vue表格导出到Excel相关推荐

【vue + Excel表格导入与导出】导入Excel并展示在el-table表格中，表格导出为Excel文件
注:末尾有完整代码效果图 Excel 1.下载依赖 xlsx是导入所需依赖 file-saver是导出所需依赖 npm install xlsx --save npm install file-sa ...
前端表格导出为excel方法合集
前端表格导出为excel方法合集近来遇到了前端表格保存为excel的需求,通过查阅多方资料,总结了3种方法,下面一一进行展示,有不正确的地方,望指正.主要包括两种导出方法--纯前端导出和前端接收后端 ...
html制作表格保存为txt文件,可将HTML表格导出为Excel|csv|txt文件的jQuery插件
TableExport是一款可以将HTML表格导出为Excel xlsx格式.xls格式,以及csv和txt文件的jQuery插件.TableExport插件使用简单,默认使用Bootstrap的CS ...
html导出表格为csv,可将HTML表格导出为Excel|csv|txt文件的jQuery插件
TableExport是一款可以将HTML表格导出为Excel xlsx格式.xls格式,以及csv和txt文件的jQuery插件.TableExport插件使用简单,默认使用Bootstrap的CS ...
html5怎么导出表格,《网页导出到 excel表格数据》如何将网页表格导出到excel
如何将网页数据输出为Excel或Word文件 1.保页在浏览器中访标网页,执行菜单"文件"→"另",文件类型"网页,全部". 2.用WPS ...
html excel导出的路径,html 导出多个excel表格数据-如何将html页面中的表格导出到excel表格...
怎样将html表格导出到excel中啊?我用的是asp.net. stringbuilder拼接的也就是说,是用字符组成的表格,这并不是意义上的表格. 要实现导出EXCEL的较麻烦,给你讲一下解题思路 ...
将页面表格导出为excel并下载
将页面表格导出为excel并下载的方式有很多, 本次介绍的是表格div的下载. 这种方式很简单,不需要去创建excel文件,也不需要创建工作簿,然后一点一点的填写数据.只需要将页面的div中的表格下载 ...
如何将html表格导出到excel,html 页面导出到excel表格数据类型-如何将html里面的table导出成excel...
怎么把html导出到excel表格 1先,我们打开要转换成THML的表格文件.下是我用的WPS2019版截图,EXCEL软件操作上差不多 2.接下来,点击左上角的[文件] 3.在[文件]菜单里找到并点 ...
php 复杂表格,Linux_使用JavaScript将复杂表格导出为Excel，使用JavaScript将表格导出为Excel - phpStudy...
使用JavaScript将复杂表格导出为Excel 使用JavaScript将表格导出为Excel文件是一种比较常见的导出方法,但复杂表格的导出比较麻烦(比如报表的导出),为此我专门写了一段代码专门处 ...

vue表格导出到Excel

vue表格导出到Excel相关推荐

最新文章

热门文章