vue3+element表格数据导出

实现效果

导出后的效果：

步骤

第一步：安装依赖

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导出功能以及导出乱码问题解决

巴特西

vue3+element表格数据导出

实现效果

步骤

最新文章

热门文章