Vue+Element从Excel批量导入信息，下载导入模板也不在话下！

前端

2024-02-16 18:16:16

用 Vue+Element 实现无缝的 Excel 批量导入和导出

在数据驱动的现代世界中，处理海量 Excel 数据已成为日常工作的一部分。为了简化这一过程，我们可以借助 Vue.js 和 Element UI 的强大功能，实现高效的批量导入和导出操作。

第一步：准备工作

在开始之前，让我们确保我们拥有必要的工具：

安装 Vue.js：npm install vue
安装 Element UI：npm install element-ui

第二步：配置 Vue 项目

创建一个新的 Vue 项目：

vue create vue-excel-import
cd vue-excel-import

在 main.js 文件中，配置 Vue 和 Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import excelImport from 'excel-import'
Vue.use(ElementUI)
Vue.use(excelImport)

第三步：创建 Vue 组件

创建一个 Vue 组件来处理导入和导出功能：

export default {
  methods: {
    importExcel() {
      this.$excelImport('文件选择框').then((data) => {
        // 处理导入的数据
      })
    },
    exportExcel() {
      this.$excelExport('文件下载框', {
        data: '要导出的数据'
      })
    }
  }
}

第四步：使用导入和导出功能

在 Vue 组件中，使用 importExcel() 和 exportExcel() 方法来执行导入和导出操作。

<template>
  <div>
    <el-button @click="importExcel">导入</el-button>
    <el-button @click="exportExcel">导出</el-button>
  </div>
</template>

<script>
import excelImport from 'excel-import'
export default {
  methods: {
    importExcel() {
      this.$excelImport('文件选择框').then((data) => {
        // 处理导入的数据
      })
    },
    exportExcel() {
      this.$excelExport('文件下载框', {
        data: '要导出的数据'
      })
    }
  }
}
</script>

第五步：运行项目

现在，我们可以运行项目：

npm run serve

访问 localhost:8080 以在浏览器中查看导入和导出功能。

拓展：纯前端 Excel 导入

如果您希望避免后端依赖，也可以使用纯前端方式导入 Excel：

import Excel from 'exceljs'
export default {
  methods: {
    importExcel() {
      const input = document.createElement('input')
      input.type = 'file'
      input.accept = '.xlsx'
      input.onchange = (e) => {
        const file = e.target.files[0]
        const reader = new FileReader()
        reader.onload = (e) => {
          const data = e.target.result
          const workbook = new Excel.Workbook()
          workbook.xlsx.load(data).then(() => {
            const worksheet = workbook.getWorksheet(1)
            const rows = worksheet.getRows()
            // 处理导入的数据
          })
        }
        reader.readAsArrayBuffer(file)
      }
      input.click()
    }
  }
}