element table表格导出

最新推荐文章于 2025-09-24 13:52:25 发布

原创最新推荐文章于 2025-09-24 13:52:25 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Vue项目中利用xlsx库将表格数据导出为Excel文件，包括设置导出文件名、生成工作簿对象及保存文件的具体实现。

## html
 <span  @click="exportExcel">

class=table


   <el-table
            :data="rightsDate"
           max-height="450"
            class="table"
          >

import FileSaver from "file-saver";
import XLSX from "xlsx";
// 导出表格所用
  exportExcel() {
    // 设置当前日期
    let time = new Date();
    let year = time.getFullYear();
    let month = time.getMonth() + 1;
    let day = time.getDate();
    let name = year + "" + month + "" + day;

    /* generate workbook object from table */
    //  .table要导出的是哪一个表格
    var wb = XLSX.utils.table_to_book(document.querySelector(".table"));
    /* get binary string as output */
    var wbout = XLSX.write(wb, {
      bookType: "xlsx",
      bookSST: true,
      type: "array"
    });
    try {
      //  name+'.xlsx'表示导出的excel表格名字
      FileSaver.saveAs(
        new Blob([wbout], {type: "application/octet-stream"}),
        name + ".xlsx"
      );
    } catch (e) {
      if (typeof console !== "undefined") console.log(e, wbout);
    }
    return wbout;
},