快捷導(dǎo)航

Vue將el-table導(dǎo)出為excel文件的實(shí)現(xiàn)方法

更新時(shí)間：2025年02月25日 10:48:18 作者：程序員小續(xù)

在 Vue + Element UI 中,el-table 數(shù)據(jù)導(dǎo)出 Excel 文件,可以使用 xlsx（SheetJS）庫(kù)進(jìn)行處理,以下是詳細(xì)的實(shí)現(xiàn)方法,包括安裝依賴、代碼示例和優(yōu)化建議,需要的朋友可以參考下

1. 安裝依賴

首先，安裝 xlsx 庫(kù)：

npm install xlsx file-saver --save

xlsx：用于解析和生成 Excel 文件。
file-saver：用于保存導(dǎo)出的 Excel 文件。

2. 代碼實(shí)現(xiàn)

完整示例

vue
復(fù)制編輯
<template>
  <div>
    <el-button type="primary" @click="exportExcel">導(dǎo)出 Excel</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="age" label="年齡" width="80"></el-table-column>
      <el-table-column prop="city" label="城市" width="150"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
 
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: "張三", age: 25, city: "北京" },
        { id: 2, name: "李四", age: 30, city: "上海" },
        { id: 3, name: "王五", age: 28, city: "廣州" },
      ],
    };
  },
  methods: {
    exportExcel() {
      // 1. 提取表格數(shù)據(jù)
      const data = this.tableData.map((row) => ({
        ID: row.id,
        姓名: row.name,
        年齡: row.age,
        城市: row.city,
      }));
 
      // 2. 創(chuàng)建工作表
      const worksheet = XLSX.utils.json_to_sheet(data);
 
      // 3. 創(chuàng)建工作簿
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "表格數(shù)據(jù)");
 
      // 4. 生成 Excel 并下載
      const excelBuffer = XLSX.write(workbook, {
        bookType: "xlsx",
        type: "array",
      });
 
      const blob = new Blob([excelBuffer], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      });
 
      saveAs(blob, "表格數(shù)據(jù).xlsx");
    },
  },
};
</script>

3. 代碼解析

exportExcel 方法

格式化數(shù)據(jù)
- 先將 el-table 的 tableData 數(shù)據(jù)格式化成適合 Excel 的 JSON 結(jié)構(gòu)。
- json_to_sheet 方法用于將 JSON 轉(zhuǎn)換為 Excel 可識(shí)別的表格。
創(chuàng)建工作表 & 工作簿
- XLSX.utils.json_to_sheet(data) 創(chuàng)建 Excel 工作表。
- XLSX.utils.book_new() 創(chuàng)建新的 Excel 文件（工作簿）。
- XLSX.utils.book_append_sheet(workbook, worksheet, "表格數(shù)據(jù)") 將表格數(shù)據(jù)添加到工作簿。
生成 Excel 并觸發(fā)下載
- XLSX.write(workbook, { bookType: "xlsx", type: "array" }) 生成 Excel 文件的二進(jìn)制數(shù)據(jù)。
- new Blob([...], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }) 生成 Excel 文件 Blob。
- saveAs(blob, "表格數(shù)據(jù).xlsx") 觸發(fā)瀏覽器下載。

4. 額外優(yōu)化

1. 自定義表頭

可以用 el-table-column 的 label 作為 Excel 表頭，而不是手動(dòng)寫(xiě)：

exportExcel() {
  const headers = this.$refs.table.columns.map(col => col.label); // 獲取表頭
  const keys = this.$refs.table.columns.map(col => col.property); // 獲取字段
 
  const data = this.tableData.map(row => {
    let obj = {};
    keys.forEach((key, index) => {
      obj[headers[index]] = row[key];
    });
    return obj;
  });
 
  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "數(shù)據(jù)");
 
  const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
  const blob = new Blob([excelBuffer], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  });
 
  saveAs(blob, "表格數(shù)據(jù).xlsx");
}

然后在 el-table 中添加 ref="table"。

2. 處理合并單元格

可以使用 XLSX.utils.sheet_add_aoa 進(jìn)行合并：

XLSX.utils.sheet_add_aoa(worksheet, [["ID", "姓名", "年齡", "城市"]], { origin: "A1" });

這樣可以在 A1 手動(dòng)插入表頭。

3. 設(shè)置列寬

worksheet["!cols"] = [
  { wch: 10 }, // ID列寬
  { wch: 20 }, // 姓名列寬
  { wch: 10 }, // 年齡列寬
  { wch: 15 }, // 城市列寬
];

5. 結(jié)論

適用于 Vue 2.0 + Element UI 的 el-table
可以導(dǎo)出 Excel，支持中文表頭
支持自定義表頭、列寬、格式優(yōu)化
減少人工操作，提高開(kāi)發(fā)效率

如果你需要更復(fù)雜的 Excel 處理，比如合并單元格、設(shè)置樣式、多個(gè) Sheet 導(dǎo)出，可以繼續(xù)優(yōu)化！

到此這篇關(guān)于Vue將el-table導(dǎo)出為excel文件的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)Vue el-table導(dǎo)出為excel內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: