当前位置：首页 > VUE

vue实现表格导出

2026-02-19 05:52:31VUE

Vue 表格导出实现方法

使用 xlsx 库导出 Excel

安装 xlsx 库：

npm install xlsx

创建导出方法：

import * as XLSX from 'xlsx';

export function exportExcel(data, fileName = '导出数据') {
  const ws = XLSX.utils.json_to_sheet(data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  XLSX.writeFile(wb, `${fileName}.xlsx`);
}

在组件中使用：

import { exportExcel } from '@/utils/export';

methods: {
  handleExport() {
    const tableData = this.tableData; // 获取表格数据
    exportExcel(tableData, '用户数据');
  }
}

使用 html-to-excel 库

安装 html-to-excel：

npm install vue-html-to-excel

注册插件：

import Vue from 'vue';
import VueHtmlToExcel from 'vue-html-to-excel';

Vue.use(VueHtmlToExcel);

模板中使用：

<template>
  <button @click="exportToExcel">导出Excel</button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...]
    }
  },
  methods: {
    exportToExcel() {
      this.$htmlToExcel('导出数据', 'table-id');
    }
  }
}
</script>

导出 CSV 格式

创建 CSV 导出方法：

export function exportCSV(data, fileName = '导出数据') {
  const header = Object.keys(data[0]).join(',') + '\n';
  const rows = data.map(item => 
    Object.values(item).join(',')
  ).join('\n');

  const csvContent = header + rows;
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });

  const link = document.createElement('a');
  const url = URL.createObjectURL(blob);

  link.href = url;
  link.download = `${fileName}.csv`;
  link.click();
  URL.revokeObjectURL(url);
}

使用 jsPDF 导出 PDF

安装 jsPDF 和 html2canvas：

npm install jspdf html2canvas

创建 PDF 导出方法：

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

export function exportPDF(elementId, fileName = '导出数据') {
  const element = document.getElementById(elementId);

  html2canvas(element).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF('p', 'mm', 'a4');
    const imgWidth = pdf.internal.pageSize.getWidth();
    const imgHeight = canvas.height * imgWidth / canvas.width;

    pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
    pdf.save(`${fileName}.pdf`);
  });
}