快捷導(dǎo)航

Vue導(dǎo)出Excel文件的四種實(shí)現(xiàn)方式

更新時(shí)間：2025年12月19日 08:53:18 作者：悟能不能悟

文章介紹了四種在Vue.js中導(dǎo)出Excel文件的方法,包括前端使用xlsx庫(kù)、exceljs,使用現(xiàn)成組件vue-json-excel,以及后端生成,每種方法都有其適用場(chǎng)景和優(yōu)缺點(diǎn),推薦根據(jù)具體需求選擇合適的方法,需要的朋友可以參考下

1.前端導(dǎo)出方案

使用 xlsx 庫(kù)（推薦）

npm install xlsx
# 或
yarn add xlsx

<template>
  <button @click="exportExcel">導(dǎo)出Excel</button>
</template>

<script>
import * as XLSX from 'xlsx';

export default {
  data() {
    return {
      tableData: [
        { name: '張三', age: 25, city: '北京' },
        { name: '李四', age: 30, city: '上海' }
      ]
    }
  },
  methods: {
    exportExcel() {
      // 創(chuàng)建工作簿
      const wb = XLSX.utils.book_new();
      
      // 創(chuàng)建工作表
      const ws = XLSX.utils.json_to_sheet(this.tableData);
      
      // 將工作表添加到工作簿
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      
      // 導(dǎo)出文件
      XLSX.writeFile(wb, '用戶數(shù)據(jù).xlsx');
    }
  }
}
</script>

使用 exceljs（功能更強(qiáng)大）

npm install exceljs
npm install file-saver

import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

async exportExcel() {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('Sheet1');
  
  // 添加表頭
  worksheet.columns = [
    { header: '姓名', key: 'name' },
    { header: '年齡', key: 'age' },
    { header: '城市', key: 'city' }
  ];
  
  // 添加數(shù)據(jù)
  this.tableData.forEach(item => {
    worksheet.addRow(item);
  });
  
  // 保存文件
  const buffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buffer], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
  });
  saveAs(blob, '用戶數(shù)據(jù).xlsx');
}

2.使用現(xiàn)成組件

vue-json-excel

npm install vue-json-excel

<template>
  <download-excel
    :data="tableData"
    :fields="jsonFields"
    name="用戶數(shù)據(jù).xlsx"
  >
    <button>導(dǎo)出Excel</button>
  </download-excel>
</template>

<script>
import JsonExcel from 'vue-json-excel';

export default {
  components: {
    'download-excel': JsonExcel
  },
  data() {
    return {
      tableData: [...],
      jsonFields: {
        '姓名': 'name',
        '年齡': 'age',
        '城市': 'city'
      }
    }
  }
}
</script>

3.后端生成方案

如果數(shù)據(jù)量大或需要復(fù)雜格式，建議后端生成：

// 前端調(diào)用
exportExcel() {
  axios({
    url: '/api/export/excel',
    method: 'GET',
    responseType: 'blob'  // 重要：接收文件流
  }).then(response => {
    const blob = new Blob([response.data], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'data.xlsx';
    link.click();
    window.URL.revokeObjectURL(url);
  });
}

4.簡(jiǎn)單表格導(dǎo)出

exportTable() {
  const table = document.querySelector('#your-table');
  const wb = XLSX.utils.table_to_book(table);
  XLSX.writeFile(wb, '表格數(shù)據(jù).xlsx');
}