vue导出excel表格

huxihua2006

已于 2023-02-01 16:18:29 修改

阅读量437

点赞数 1

文章标签： vue.js javascript 前端

于 2022-06-10 11:20:29 首次发布

本文链接：https://blog.csdn.net/huxihua2006/article/details/125218181

版权

本文介绍如何在Vue.js项目中实现数据的Excel导出功能。通过结合JavaScript库，如xlsx，我们可以轻松地将前端数据转换并下载为Excel文件，从而增强应用的交互性和用户体验。

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

1.创建excel.js文件，代码如下可直接复制
//引入依赖
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx';

// id绑定的id，title表格名称
export const excel = (id, title) => {
  console.log("我执行了")
  /* generate workbook object from table */
  //  判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
  let fix = document.querySelector('.el-table__fixed');
  let wb;
  if (fix) {
    wb = XLSX.utils.table_to_book(document.querySelector('#'+id).removeChild(fix));
    document.querySelector('#'+id).appendChild(fix);
  } else {
    wb = XLSX.utils.table_to_book(document.querySelector('#'+id));
  }


  //网上wb = XLSX.utils.table_to_book(document.querySelector('#'+id));直接这样写，如果存在固定列，导出的excel表格会重复两遍

  /* get binary string as output */
  let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
  try