Vue项目中批量导入数据

一、封装文件上传组件

基于elementUI开发的项目可以参考vue-element-admin管理模板中的UploadExcel组件进行组件封装，项目地址如下：

https://gitee.com/panjiachen/vue-element-admin/blob/master/src/components/UploadExcel/index.vue#

二、插件下载

Excel表格数据的导入依赖于xlsx插件，所以在项目运行的时候需要进行插件安装，在终端输入以下命令：

npm i xlsx -S

三、修改导入方式

由于安装的是最新版本的xlsx插件，插件的引入方式已经有所改变，所以我们需要修改插件的引入方式，在UploadExcel组件中找到xlsx插件的引入，修改为

import * as XLSX from 'xlsx'

四、上传数据的获取

封装好组件之后，可以通过父组件定义自定义属性on-success来对数据进行接收

<upload-excel :on-success="success" />

success函数接收一个参数，参数即为上传数据的数据对象

参数中的header为上传的Excel表格中的表格头数据,results为每一项数据对象。

五、Excel上传日期格式问题处理（不包含时分秒）

在利用js-xlsx插件导入数据的时候，导入的日期格式数据会转换成数字形式（非时间戳） 在Excel中：

• 1是1900年01月01日
• 59是1900年02月28日
• 60是1900年02月29日 1900年是平年，没有这一天！！！（对这一天单独处理）
• 61是1900年03月01日
• 62是1900年03月02日

格式化代码如下：

/**
 * 格式化Excel表中存储的年月日日期
 * @param {number} num - excel存储的数字
 * @param {string} [format = '-'] - 年月日的间隔符，默认为'-'
 * @returns {string} 格式化后的日期
 */
function formatExcelDate(num, format = '-') {
  if (!/^\d+$/.test(num)) return
  num = parseInt(num)
  let millisecond = 0 // 转化后的毫秒数
  if (num > 60) { // 对大于60的日期进行减1处理
    millisecond = (num - 25568 - 1) * 3600 * 24 * 1000
  } else {
    millisecond = (num - 25568) * 3600 * 24 * 1000
  }
  const date = new Date(millisecond) // 根据转化后的毫秒数获取对应的时间
  const yy = date.getFullYear()
  const m = date.getMonth() + 1
  const mm = m >= 10 ? m : '0' + m
  const d = date.getDate()
  const dd = d >= 10 ? d : '0' + d
  return yy + format + mm + format + dd // 返回格式化后的日期
}