vue3+element表格数据导出

兔子先森Ace

已于 2022-11-20 13:36:14 修改

阅读量1.8k

点赞数 2

分类专栏： vue 文章标签： javascript 开发语言 ecmascript

于 2022-09-01 21:01:18 首次发布

本文链接：https://blog.csdn.net/qq_44793507/article/details/126651218

版权

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在前端实现Excel表格数据的导出功能。通过四个步骤详细阐述了从安装依赖到调用接口导出表格数据的完整过程，特别强调了在表格上添加id和使用file-saver、xlsx库的重要性。内容适用于前端开发者，帮助他们理解如何将渲染的表格与导出文件关联，并处理后台接口返回的数据进行导出。

摘要由CSDN通过智能技术生成

实现效果

在这里插入图片描述
导出后的效果：

步骤

第一步：安装依赖

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;
      }