关于前端:vue3element表格数据导出

实现成果

导出后的成果：

步骤

第一步：装置依赖

npm install --save xlsx file-saver

第二步：给表格增加id，导出的时候须要用到

  <!-- 导出按钮 --> <el-button type="primary" @click="exportExcel">导出</el-button>  <!-- 表格 -->     <el-table      id="out-table"      // 增加id 这一步很重要     :data="PowerList" border       style="width: 100%"      class="tableBox">                </el-table>      <!-- 表格end -->

第三步：引入依赖

// 引入导出Excel表格依赖import * as FileSaver from "file-saver";import * as XLSX from "xlsx";

第四步：导出

// 导出表格  按钮点击后触发事件const exportExcel = () => {        /* 从表生成工作簿对象 */        var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));        /* 获取二进制字符串作为输入 */        var wbout = XLSX.write(wb, {            bookType: "xlsx",            bookSST: true,            type: "array"        });        try {            FileSaver.saveAs(            //Blob 对象示意一个不可变、原始数据的类文件对象。            //Blob 示意的不肯定是JavaScript原生格局的数据。            //File 接口基于Blob，继承了 blob 的性能并将其扩大使其反对用户零碎上的文件。            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。            new Blob([wbout], { type: "application/octet-stream" }),            //设置导出文件名称            "idea.xlsx"            );        } catch (e) {            if (typeof console !== "undefined") console.log(e, wbout);        }        return wbout;      }

这种导出形式跟渲染的表格数据是关联 ，如果想要全副导出，能够查问所有再导出。
有些状况下，表格数据是后盾接口返回的，这个时候须要调用接口来导出表格，对于调用后盾接口实现Excel导出性能请看另一篇：调用后盾接口实现Excel导出性能以及导出乱码问题解决