安装插件 

  npm install file-saver xlsx -s

项目中导入 

 import FileSaver from 'file-saver'
 import XLSX from 'xlsx'

使用方法

  • HTML


  • js
handleExport(activeName) {
          // 判断是否有可导出数据
  if (!this.list.length) {
    this.$message.error('当前表格暂无可导出的数据');
    return;
  }

    // 活动名称映射
    const activityMap = {
      day: { showUnit: '日', timeUnit: '时', dateFormat: 'YYYY年-MM月-DD日', value: this.dayValue },
      month: { showUnit: '月', timeUnit: '日', dateFormat: 'YYYY年-MM月', value: this.monthValue },
      year: { showUnit: '年', timeUnit: '月', dateFormat: 'YYYY年', value: this.yearValue }
    };

    const activity = activityMap[activeName];

    if (!activity) {
      this.$message.error('未知参数');
      return;
    }

    // 日期格式化
    const currDate = dayjs(activity.value).format(activity.dateFormat);

    // 获取表格元素
    const elementTable = `educe-table-${activeName}`;
    const table = document.querySelector(`#${elementTable}`);
    if (!table) {
      this.$message.error('找不到要导出的表格');
      return;
    }

    // 克隆表格并移除固定列
    const clonedTable = table.cloneNode(true);
    clonedTable.removeChild(clonedTable.querySelector(".el-table__fixed"));
    clonedTable.removeChild(clonedTable.querySelector('.el-table__fixed-right'));

    // 生成 Excel 工作簿对象
    const wb = XLSX.utils.table_to_book(clonedTable);

    // 导出文件名
    const filename = `${currDate + this.startTime + activity.timeUnit + '-' + this.endTime + activity.timeUnit + '用能' + activity.showUnit + '表'}.xlsx`;

    // 导出 Excel 文件
    try {
      const wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        book: true,
        type: 'array',
      });
      FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename);
      return wbout;
    } catch (e) {
      console.error(e);
      this.$message.error('导出失败');
    }
  }```
最后修改：2024 年 03 月 29 日
© 允许规范转载
如果觉得我的文章对你有用，请点个赞支持一下