Vue实战篇十四：前端excel组件实现数据导入

系列文章目录

Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染
Vue提高篇一：使用Vuex进行状态管理
Vue提高篇二：使用vue-router实现静态路由
Vue提高篇三：使用vue-router实现动态路由
Vue提高篇四：使用Element UI组件库
Vue提高篇五：使用Jest进行单元测试
Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一： 使用Vue搭建注册登录界面
Vue实战篇二： 实现邮件验证码发送
Vue实战篇三：实现用户注册
Vue实战篇四：创建多步骤表单
Vue实战篇五：实现文件上传
Vue实战篇六：表格渲染动态数据
Vue实战篇七：表单校验
Vue实战篇八：实现弹出对话框进行交互
Vue实战篇九：使用省市区级联选择插件
Vue实战篇十：响应式布局
Vue实战篇十一：父组件获取子组件数据的常规方法
Vue实战篇十二：多项选择器的实际运用
Vue实战篇十三：实战分页组件
Vue实战篇十四：前端excel组件实现数据导入

---

一、背景

• 前端在处理大批量数据时，有时候需要通过excel文件实现数据的导入：

1. 前端界面选择需要导入的excel文件，将excel中的数据列表展示在页面上；
2. 导入的数据通过后端接口上传至数据库进行保存。

• 本文将通过SheetJS js-xlsx 组件实现前端的数据导入。

二、用法

2.1 使用VUE-CLI脚手架建立框架；

2.2 安装SheetJS js-xlsx 组件

> npm install xlsx --save

2.3 编写Excel上传组件

<template>
  <div>
    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
    <el-button :loading="loading" style="margin-left:5px;" size="large" type="primary" @click="handleUpload">
      打开exc