结合elementUI实现excel导出

F N Nancy

已于 2022-07-20 11:07:36 修改

阅读量715

点赞数

分类专栏：笔记 elementui 文章标签： elementui vue.js javascript

于 2022-07-20 11:03:39 首次发布

本文链接：https://blog.csdn.net/NancyFyn/article/details/125888015

版权

笔记同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

elementui

11 篇文章 0 订阅

订阅专栏

该博客文章介绍了如何利用ElementUI库实现Excel文件的导出功能。通过点击按钮，可以将网页表格数据转换为Excel格式，并进行保存。代码示例展示了如何选取表格、生成工作簿对象以及使用FileSaver库保存文件。

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

导出文件格式为excel格式，导出数据包括表头。

承接上篇文章：结合elementUI实现excel导入导出_F N Janine的博客-CSDN博客

一、html


            <el-button
              size="mini"
              type="primary"
              class="eidt"
              @click="exportExcel"
              >导出</el-button
            >

二、script

    //点击导出
    exportExcel() {
      var xlsxParam = { raw: true };
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#tableId"),
        xlsxParam
      );
      /* 获取二进制字符串作为输出 */
      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" }),
          //设置导出文件名称
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },