当前位置：首页 > VUE

vue实现excel导入导出

2026-02-22 00:23:10VUE

Vue 实现 Excel 导入导出

安装依赖

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

npm install xlsx

Excel 导入实现

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

<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 方法实现。

vue实现excel导入导出

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

注意事项

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

扩展功能

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

标签: vue excel

分享给朋友：

vue实现钟表

使用 Vue 实现动态钟表以下是一个基于 Vue 3 的动态钟表实现方案，包含时分秒指针和数字时间显示。模板部分 <template> <div class="clock-…

vue实现签章

Vue 实现签章功能签章功能通常包括手写签名、电子印章等。以下是基于 Vue 的实现方法：使用 canvas 实现手写签名安装依赖（如需要）： npm install signature_p…

vue 实现排序

Vue 实现排序的方法使用计算属性实现排序通过计算属性对数组进行排序，可以保持原始数据不变。示例代码展示了如何对列表按名称升序排序： <template> <div>…

vue 实现登录

Vue 实现登录功能创建登录表单组件在 Vue 项目中创建一个登录表单组件（如 Login.vue），包含用户名和密码输入框以及提交按钮。使用 v-model 实现双向数据绑定。 <tem…

vue实现增加

实现 Vue 中的新增功能在 Vue 中实现新增功能通常涉及数据绑定、表单处理和状态管理。以下是几种常见的实现方式：数据绑定与列表渲染通过 v-model 绑定表单输入，使用数组的 push…

vue实现tabs

Vue实现Tabs组件的方法使用动态组件和v-for指令在Vue中创建Tabs组件可以通过动态组件和v-for指令实现。定义一个包含tab标题和内容的数组，使用v-for渲染tab标题，并通过点击…

vue实现excel导入导出