Detailed steps to implement the Excel import function in Vue

import PageTools from './PageTools'
import UploadExcel from './UploadExcel'
 
export default {
  // Initialization of the plugin. The global functions provided by the plugin can be configured here install(Vue) {
    // Global registration of components Vue.component('PageTools', PageTools) // Register toolbar component Vue.component('UploadExcel', UploadExcel) // Register imported excel component }
} 

/**
     * results excel table content // [ {'name': 'Xiao Zhang', 'mobile phone number': '13712345678'}, {.....} ]
      // Target// [ {'username': 'Xiao Zhang', 'mobile': '13712345678'}, {.....} ]
     */
    transExcel(results) {
      const userRelations = {
        'Job Entry Date': 'timeOfEntry',
        'Mobile number': 'mobile',
        'Name': 'username',
        'Correction Date': 'correctionTime',
        'work number': 'workNumber',
        'Department': 'departmentName',
        'Form of employment': 'formOfEmployment'
      }
      return results.map(item => {
        const obj = {}
        // 1. Get all the attribute names of this object: ['name', 'phone number']
        // 2. Traverse this array, find the corresponding English name in userRelations through the Chinese name, and save the value const zhKeys = Object.keys(item)
        zhKeys.forEach(zhKey => {
          const enKey = userRelations[zhKey]
          // If it is in time format, convert it if (enKey === 'correctionTime' || enKey === 'timeOfEntry') {
            obj[enKey] = new Date(formatExcelDate(item[zhKey]))
          } else {
            obj[enKey] = item[zhKey]
          }
        })
 
        return obj
      })
    }
 
handleSuccess({ results, header }) {
    
  console.log('The content read from the current excel file is', results)
  // results: [{Joining date: 44502, Name: xxxx}]
  // Target:
  // results: [{timeOfEntry: 44502, username: xxxx}]
  // Process the format read from Excel const arr = this.transExcel(results)
  console.log('The format after conversion is', arr)
})

// Convert the date format in the Excel file back to standard time // https://blog.csdn.net/qq_15054679/article/details/107712966
export function formatExcelDate(numb, format = '/') {
  const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000)
  time.setYear(time.getFullYear())
  const year = time.getFullYear() + ''
  const month = time.getMonth() + 1 + ''
  const date = time.getDate() + ''
  if (format && format.length === 1) {
    return year + format + month + format + date
  }
  return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}

import { importEmployee } from '@/api/employees'
export default {
  name: 'Import',
  methods: {
    async handleSuccess({ results, header }) {
      try {
        console.log('The content read from the current excel file is', results)
        // results: [{Joining date: 44502, Name: xxxx}]
        // Target:
        // results: [{timeOfEntry: 44502, username: xxxx}]
        const arr = this.transExcel(results)
        console.log('The format after conversion is', arr)
        //Call the upload interface,
        const rs = await importEmployee(arr)
        console.log('Call the upload interface', rs)
        // After the upload is successful, return to the previous page this.$router.back()
        this.$message.success('Operation successful')
      } catch (err) {
        this.$message.error(err.message)
      }
    }
}