vue前端导出xlsx表格

前言

此篇记录一下前端导出xlsx表格的功能，网上都有很多方法，特整理记录一下，方便之后查阅；

项目：vue3+ts

需要加载的依赖

file-saver 是一个用于保存文件的 JavaScript 库。它提供了一种简单的方式来生成和保存文件，支持各种文件类型，例如文本文件、图片、PDF 等。

npm install file-saver
npm install xlsx@^0.16.0
npm install element-plus --save

在页面中使用

<el-button  @click="exportTable">导出excel</el-button>

//给表格添加id
<el-table id="tab">
</el-table>


// 导入依赖
import XLSX from 'xlsx'
import FileSaver from 'file-saver'


//导出点击事件
 const exportTable = () => {
      const el = document.getElementById('tab');
      console.log(el);
      // 文件名
      const filename = 'xxxxx.xlsx';//导出的文件名字
      const wb = XLSX.utils.table_to_book(el, { raw: true });
      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename);
      } catch (e) {
        console.log(e);
      }
      return wbout;
    }

成功导出

前端用le-table，配合插件成功导出xlsx表格文件