1.前端主導實現步驟

第一步，點選頁面上的匯入按鈕，讀入Excel檔案

利用外掛完成。

第二步，按照後端的要求對資料格式加工，轉成他們需要的格式

需要自己寫邏輯。

第三步，通過後端介面，將資料通過ajax發回去

調介面，常規操作。

簡而言之：前端讀excel檔案，修改檔案格式，調介面

2.實現讀入Excel檔案

注：此步驟就可實現前端匯入功能。如對修改格式有興趣，可以繼續看第三步。

概括：複製程式碼到自己的資料夾下，下載必需的外掛。

2.1 使用的是elementUI提供的-admin-element中的上傳方法（百度倉庫克隆方式，官網也有）

2.2 下載包 npm install xlsx -S （預設現在已經完成2.1步驟了）

2.3引入UploadExcel元件並註冊為全域性（去找UploadExcel這個檔案，複製一下，封裝元件不必多說）

不會註冊全域性元件參考下面程式碼：（你樂意在main.裡頭搞也行，這裡我就按可維護性高搞）

import PageTools from './PageTools'
import UploadExcel from './UploadExcel'
 
export default {
  // 外掛的初始化,外掛給你提供的全域性的功能,都可以在這裡配置
  install(Vue) {
    // 進行元件的全域性註冊
    Vue.component('PageTools',PageTools) // 註冊工具欄元件
    Vue.component('UploadExcel',UploadExcel) // 註冊匯入excel元件
  }
}

2.4 引入元件，使用元件，配置路由，設定點選回撥函式（不必多說）

2.5 測試效果

瀏覽器手動輸入你設定的路由地址，頁面跳轉過去

小結：1.最重要的就是去複製，然後下載必要外掛

2.引入UploadExcel元件（作用是匯入Excel檔案）是必須的，但是註冊全域性不是必須的，看心情

3. 匯入元件，給他註冊回撥函式，他裡面的兩個引數是必須的，可以參考人家原始碼，更易理解

4.excel匯入外掛本質：把excel經過分析轉換成js能夠識別的常規資料，拿到資料我們可以進行任何操作

3.對資料進行加工

注：此步驟其實考驗的是對的運用，可惜這個對我沒難度，相信很久之後也是。

3.1 後端要求的格式：

3.2 我們要處理的內容：

• 欄位中文轉英文。excel中讀入的是姓名,而後端需要的是username
• 日期處理。從excel中讀入的時間是一個number值，而後端需要的是標準日期。

3.3 單獨封裝一個處理函式：

/**
     * results excel表格的內容
      //        [ {'姓名'：'小張'， '手機號': '13712345678'},{.....} ]
      // 目標
      //        [ {'username'：'小張'， 'mobile': '13712345678'},{.....} ]
     */
    transExcel(results) {
      const userRelations = {
        '入職日期': 'timeOfEntry','手機號': 'mobile','姓名': 'username','轉正日期': 'correctionTime','工號': 'workNumber','部門': 'departmentName','聘用形式': 'formOfEmployment'
      }
      return results.map(item => {
        const obj = {}
        // 1. 取出這個物件所有的屬性名： ['姓名'， ‘手機號']
        // 2. 遍歷這個陣列，通過 中文名去 userRelations 找對應英文名， 儲存值
        const zhKeys = Object.keys(item)
        zhKeys.forEach(zhKey => {
          const enKey = userRelations[zhKey]
          // 如果是時間格式，就要做轉換
          if (enKey === 'correctionTime' || enKey === 'timeOfEntry') {
            obj[enKey] = new Date(formatExcelDate(item[zhKey]))
          } else {
            obj[enKey] = item[zhKey]
          }
        })
 
        return obj
      })
    }
 
handleSuccess({ results,header }) {
    
  console.log('從當前excel檔案中讀出的內容是',results)
  // results: [{入職日期: 44502,姓名：xxxx}]
  // 目標：
  // results: [{timeOfEntry: 44502,username：xxxx}]
  // 處理從excel中讀入的格式
  const arr = this.transExcel(results)
  console.log('轉換之後的格式是',arr)
})

3.4 日期處理函式：

// 把excel檔案中的日期格式的內容轉回成標準時間
// 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 = http://www.cppcns.comtime.getDate() + ''
  if (format && format.length === 1) {
    return year + format + month www.cppcns.com+ format + date
  }
  return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}

4.調介面，發請求，在頁面中使用

import { importEmployee } from '@/api/employees'
export default {
  name: 'Import',methods: {
    async handleSuccess({ results,header }) {
      try {
       www.cppcns.com console.log('從當前excel檔案中讀出的內容是',results)
        // results: [{入職日期: 44502,姓名：xxxx}]
        // 目標：
        // results: [{timeOfEntry: 44502,username：xxxx}]
        const arr = this.transExcel(results)
        console.log('轉換之後的格式是',arr)
        // 呼叫上傳的介面，
        const rs = await importEmployee(arr)
        console.log('呼叫上傳的介面',rs)
        // 上傳成功之後，回去剛才的頁面
        this.$router.back()
        this.$message.success('操作成功')
      } catch (err) {
        this.$message.error(err.message)
      }
    }
}

5 總結：

匯入的功能和匯出差不多，難點在於轉換資料格式，本篇文章沒有過多介紹，但在另一篇匯出文章中詳細說明了，有興趣的可以去看看 點我跳轉至匯出功能實現

到此這篇關於Vue實現匯入Excel功能的文章就介紹到這了,更多相關vue匯入Excel內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！