Vue項目中如何實現(xiàn)表格選中數(shù)據(jù)的Excel導出

更新時間：2025年10月09日 08:54:47 作者：芭拉拉小魔仙

這篇文章主要為大家詳細介紹了Vue項目中如何實現(xiàn)表格選中數(shù)據(jù)的Excel導出功能,文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下

一、安裝

npm install xlsx

二、核心代碼

<template>
  <div class="statistics-container">
      <el-button type="primary" @click="handleExportSelected">導出選中</el-button>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="index" label="序號" width="90" />
        <el-table-column prop="nickName" label="昵稱" width="170" />
        <el-table-column prop="username" label="賬號名" width="150" />
      </el-table>
  </div>
</template>

 <script lang="ts" setup>
import * as XLSX from "xlsx";
// 表格數(shù)據(jù)
const tableData = ref([]);

// 選中項
const selectedRows = ref<any[]>([]);
const handleSelectionChange = (val: any[]) => {
  selectedRows.value = val;
};
// 導出選中
const handleExportSelected = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("請先選擇要導出的數(shù)據(jù)");
    return;
  }

  // 準備導出數(shù)據(jù)
  const exportData = selectedRows.value.map((item) => {
    return {
      用戶ID: item.userId,
      客戶昵稱: item.nickName,
      賬號名: item.username,
    };
  });

  // 創(chuàng)建工作簿
  const ws = XLSX.utils.json_to_sheet(exportData);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "列表數(shù)據(jù)");

  // 導出文件
  const fileName = `列表數(shù)據(jù)_選中_${new Date().getTime()}.xlsx`;
  XLSX.writeFile(wb, fileName);

  ElMessage.success(`成功導出${selectedRows.value.length}條數(shù)據(jù)`);
};
</script>

三、設置表頭樣式、實現(xiàn)列寬自適應

安裝xlsx-js-style，設置單元格樣式

npm install xlsx-js-style

import XLSX from "xlsx-js-style";
// 導出選中
const handleExportSelected = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("請先選擇要導出的數(shù)據(jù)");
    return;
  }

  // 準備導出數(shù)據(jù)
  const exportData = selectedRows.value.map((item) => {
    return {
      用戶ID: item.userId,
      客戶昵稱: item.nickName,
      賬號名: item.username,
    };
  });

  // 創(chuàng)建工作簿
  const ws = XLSX.utils.json_to_sheet(exportData);
  // 設置表頭樣式
  const headerStyle = {
    font: {
      name: "Arial",
      sz: 12,
      bold: true,
      color: { rgb: "000000" },
    },
    fill: {
      fgColor: { rgb: "f3fff1" },
    },
    alignment: {
      horizontal: "center",
      vertical: "center",
    },
    border: {
      top: { style: "thin", color: { rgb: "000000" } },
      bottom: { style: "thin", color: { rgb: "000000" } },
      left: { style: "thin", color: { rgb: "000000" } },
      right: { style: "thin", color: { rgb: "000000" } },
    },
  };

  // 應用表頭樣式
  const range = XLSX.utils.decode_range(ws["!ref"]);

  for (let col = range.s.c; col <= range.e.c; col++) {
    const cell = ws[XLSX.utils.encode_cell({ r: 0, c: col })];
    if (cell) {
      cell.s = headerStyle;
    }
  }

  // 設置列寬自適應
  const colWidths = [];
  for (let col = range.s.c; col <= range.e.c; col++) {
    let maxWidth = 10;
    for (let row = range.s.r; row <= range.e.r; row++) {
      const cell = ws[XLSX.utils.encode_cell({ r: row, c: col })];
      if (cell && cell.v) {
        const cellLength = cell.v.toString().length;
        if (cellLength > maxWidth) {
          maxWidth = cellLength;
        }
      }
    }
    // 限制最大寬度為50，最小寬度為20
    colWidths.push({ wch: Math.min(Math.max(maxWidth + 2, 20), 50) });
  }
  ws["!cols"] = colWidths;

  const wb = XLSX.utils.book_new();
  console.log(ws);

  XLSX.utils.book_append_sheet(wb, ws, "列表數(shù)據(jù)");

  // 導出文件
  const fileName = `列表數(shù)據(jù)_選中_${new Date().getTime()}.xlsx`;
  XLSX.writeFile(wb, fileName);

  ElMessage.success(`成功導出${selectedRows.value.length}條數(shù)據(jù)`);
};