vue实现表格导入导出

Vue 实现表格导入导出

安装依赖

确保项目中安装了处理 Excel 的库，如 xlsx 和文件操作的库（如 file-saver）。

npm install xlsx file-saver --save

表格导出功能

通过 xlsx 和 file-saver 实现将表格数据导出为 Excel 文件。

1. 在组件中引入依赖：

   import * as XLSX from 'xlsx';
   import { saveAs } from 'file-saver';

2. 定义导出方法：

   exportToExcel() {
   const data = this.tableData; // 表格数据
   const worksheet = XLSX.utils.json_to_sheet(data);
   const workbook = XLSX.utils.book_new();
   XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
   const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
   const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
   saveAs(blob, 'exported_data.xlsx');
   }

3. 在模板中添加导出按钮：

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

表格导入功能

通过文件输入控件实现 Excel 文件导入并解析为表格数据。

1. 在模板中添加文件输入控件：

   <input type="file" @change="handleFileImport" accept=".xlsx, .xls" />

2. 定义文件导入方法：

   handleFileImport(event) {
   const file = event.target.files[0];
   const reader = new FileReader();
   reader.onload = (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const jsonData = XLSX.utils.sheet_to_json(worksheet);
    this.tableData = jsonData; // 更新表格数据
   };
   reader.readAsArrayBuffer(file);
   }

表格组件绑定

确保表格组件（如 el-table）与数据绑定：

<el-table :data="tableData">
  <!-- 列定义 -->
</el-table>

注意事项

• 文件导入时需处理异常情况（如文件格式错误）。
• 导出时可通过 XLSX.utils.book_append_sheet 添加多个工作表。
• 若需复杂样式或公式，可使用 xlsx 的高级功能或切换为其他库（如 exceljs）。