当前位置：首页 > VUE

vue实现excel导入导出

2026-02-22 00:23:10VUE

Vue 实现 Excel 导入导出

安装依赖

使用 xlsx 库处理 Excel 文件，安装命令如下：

vue实现excel导入导出

npm install xlsx

Excel 导入实现

通过 <input type="file"> 获取文件，使用 xlsx 解析数据。

vue实现excel导入导出

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

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

export default {
  methods: {
    handleFileUpload(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);
        console.log(jsonData); // 处理导入的数据
      };
      reader.readAsArrayBuffer(file);
    }
  }
};
</script>

Excel 导出实现

将数据转换为 Excel 文件并下载。

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

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

export default {
  data() {
    return {
      exportData: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
      ]
    };
  },
  methods: {
    exportToExcel() {
      const worksheet = XLSX.utils.json_to_sheet(this.exportData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      XLSX.writeFile(workbook, '导出数据.xlsx');
    }
  }
};
</script>

处理复杂数据

若需导出带表头或合并单元格的复杂数据，可通过 xlsx 的 aoa_to_sheet 方法实现。

const complexData = [
  ['姓名', '年龄'], // 表头
  ['张三', 25],
  ['李四', 30]
];
const worksheet = XLSX.utils.aoa_to_sheet(complexData);

注意事项

导入时需校验文件格式，避免非 Excel 文件。
导出大数据量时可能需分片处理，避免内存溢出。
浏览器兼容性问题可通过 FileSaver.js 辅助解决（需单独安装）。

扩展功能

使用 vue-element-admin 的 Excel 组件可快速集成。
服务端导出可通过后端生成文件流，前端调用下载接口。

标签: vue excel

分享给朋友：

ssh vue 实现

使用SSH连接Vue项目部署的服务器在Vue项目开发或部署过程中，可能需要通过SSH连接到远程服务器进行配置或维护。以下是实现SSH连接并部署Vue项目的关键步骤：生成SSH密钥对在本地终端运…

vue监听实现

Vue 监听实现方法在 Vue 中可以通过多种方式实现监听数据变化或事件触发，以下是常见的几种方法：使用 watch 选项 watch 是 Vue 提供的核心功能之一，用于观察和响应 Vue 实…

vue实现menu

Vue 实现 Menu 的方法使用 Element UI 的 Menu 组件 Element UI 提供了现成的 Menu 组件，适合快速实现导航菜单。安装 Element UI 后，可以直接使用…

vue实现发帖

使用 Vue 实现发帖功能前端实现创建发帖表单组件，包含标题和内容输入框，以及提交按钮。使用 v-model 绑定表单数据。 <template> <div>…

vue事件实现

Vue 事件实现方法在Vue中，事件处理是通过v-on指令或@简写来实现的。以下是几种常见的事件处理方式：使用v-on指令绑定事件 <button v-on:click="handleC…

vue实现座位

Vue实现座位布局使用Vue实现座位布局可以通过组件化和响应式数据管理来简化开发流程。以下是一个完整的实现方案：数据准备定义座位数据结构，通常使用二维数组表示行列关系： data() {…

vue实现excel导入导出