前端实现下载excel文件的el-table表格数据

1. 创建一个js文件

2. 安装依赖 file-saver xlsx

3. 在刚才创建的js文件中 粘以下代码 我这里文件名就叫htmlToExcel.js

import FileSaver from "file-saver";

import XLSX from "xlsx";

const htmlToExcel = {

getExcel(dom,title='默认标题',){

var excelTitle = title;

var wb = XLSX.utils.table_to_book(document.querySelector(dom), { raw: true });

/* 获取二进制字符串作为输出 */

var wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array"});

try {

FileSaver.saveAs(

new Blob([wbout], { type: "application/octet-stream" }),

excelTitle + ".xlsx"

);

} catch (e) {

if (typeof console !== "undefined") console.log(e, wbout);

}

return wbout;

}

};

export default htmlToExcel;

4. 在需要下载的组件中 引入刚才的js文件

import htmlToExcel from "../utils/htmlToExcel";

再给元素一个id 我这里就叫table了

<el-table

:data="tableData"

height="250"

id="table"

ref="print-content"

border

style="width: 100%">

在需要执行的DOM元素中 给个点击事件

<el-button icon="el-icon-download" @click="exportExcel">下载</el-button>

exportExcel() {

htmlToExcel.getExcel('#table','设备查询') //参数1是刚才起的id的名字 参数2是命名导出的excel文件的文件名

},

5. 到这里下载功能就实现喽 很简单