vue + element 表格数据导出为excel表格

由于业务内容的需要，我们有时候需要将表格中的数据做导出，生成一个excel表格，以下操作主要实现将element中的table数据生成一个excel表格并做下载操作。

效果图如下：

点击图中导出按钮时，将表格中的数据导出为一个excel文件并下载。

如下

操作步骤如下：

1.下载相应的依赖（命令如下）

npm install --save xlsx file-saver

2.下载完成后引入相应的插件

1.import FileSaver from "file-saver";

2.import * as XLSX from "xlsx";

3.在相关页面引入代码后定义方法

exportExcel() {//转换成excel时，使用原始的格式var xlsxParam = { raw: true };let fix = document.querySelector(".el-table__fixed");let wb;//判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复if (fix) {wb = XLSX.utils.table_to_book(document.querySelector("#tableId").removeChild(fix),xlsxParam);document.querySelector("#tableId").appendChild(fix);} else {wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);}var wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array",});try {FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"导出详情单.xlsx"); } catch (e) {if (typeof console !== "undefined") console.log(e, wbout);}return wbout;
},

4.给el-table中定义一个id

<el-table:data="tableData"id="tableId"style="width: 100%">
</el-table>

步骤基本完成，运行项目后点击导出按钮便可实现表格数据下载导出为excel表。

完整代码如下

<template><div class="administrativeCase-container"><div class="content-box"><div class="box-btn"><div class="btn"><div><el-button type="primary">导入</el-button><el-button @click="exportExcel()">导出</el-button></div></div></div><div class="box-content"><el-table:data="tableData"id="tableId"style="width: 100%"><el-table-columnprop="date"label="日期"fixedwidth="180"></el-table-column><el-table-columnprop="name"label="姓名"fixedwidth="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></div></div></div>
</template><script>import FileSaver from "file-saver";import * as XLSX from "xlsx";export default {data () {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}],}},methods:{// 导出exportExcel() {//转换成excel时，使用原始的格式var xlsxParam = { raw: true };let fix = document.querySelector(".el-table__fixed");let wb;//判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复if (fix) {wb = XLSX.utils.table_to_book(document.querySelector("#tableId").removeChild(fix),xlsxParam);document.querySelector("#tableId").appendChild(fix);} else {wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);}var wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array",});try {FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"导出详情单.xlsx"); //文件名} catch (e) {if (typeof console !== "undefined") console.log(e, wbout);}return wbout;},}}
</script><style></style>

vue + element 表格数据导出为excel表格相关推荐

前端进行表格数据导出到Excel表格
在一些项目中,会有可以导出表格数据的需求,这个导出的功能,前端就可以来完成,不过需要后端配合传过来表格头所对应的属性名以及这些属性名所对应的中文,搭配返回的数据,前端进行处理即可,虽然百度里面会有一大 ...
百度指数常见php框架,怎么导出数据到excel表格-如何将百度指数数据导出到Excel表格...
如何将百度指数数据导出到Excel表格第一步:打开CAD.CAD命令行输入"Li"."选择对象"选需要提取坐标的多段线.回车. 第二步:将CAD文本框中的数据 ...
php怎么将表格导出到excel表格,php怎么将excel表格数据-php 怎么把数据导出到excel表格...
如何使用php实现将数据从excel表导入到mysql中? /** * @param array $data //二维数组不是对象 * @param string $filename //导件 */ ...
php 链接excel表格数据,php 怎么把数据导出到excel表格?php 连接 excel表格数据库数据...
php 怎么把数据导出到excel表格 php 把数据导出到excel表多种方法如使用 phpExcel 等,以下代码是直接通 header 生成 excel 文件的代码示例: header(&quo ...
查询php 输出表格,php输出excel表格数据-PHP如何将查询出来的数据导出成excel表格（最好做......
PHP如何将查询出来的数据导出成excel表格(最好做... php 把数据导出excel表格有多种方法,使用 phpExcel 等,以下代码接通过 header 生成 excel 文件的代码示例: ...
php 输入表格数据,怎样将导出数据输入Excel 表格-php 怎么把数据导出到excel表格...
如何将word文档中的数据导入到excel表格中方法如下: 1.首先,打开媒介工具"记事本",将word文件里需要导入的数据,复制粘贴到记事本当中,然后保存成为txt文件,本例中 ...
表格导出计算机,电脑怎么导出excel表格数据-如何将百度指数数据导出到Excel表格...
系统没有导出功能,电脑表格里的数据有什么方法拿... 将网页表格数据导入到Excel中的方法: 第一步,将包括所需表格的网页打开,并按CTRL C把网址复制到剪贴板,以备下一步使用. 第二步,打开运行 ...
2021-08-01数据导出到Excel表格
数据导出到Excel表格 https://www.cnblogs.com/zhangzhiyong-/p/13376527.html package com.jxmcloud.business.sho ...
【纯干货】SSM 实现将数据导出为 Excel 表格（利用反射实现类型通配）
0. 这里假设 SSM 环境已经搭建完成 1. 需要三个依赖包  <dependency><groupId>org.apache ...

vue + element 表格数据导出为excel表格

vue + element 表格数据导出为excel表格相关推荐

最新文章

热门文章