如何用Vue實(shí)現(xiàn)導(dǎo)入Excel功能

本文小編為大家詳細(xì)介紹“如何用Vue實(shí)現(xiàn)導(dǎo)入Excel功能”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“如何用Vue實(shí)現(xiàn)導(dǎo)入Excel功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

1.前端主導(dǎo)實(shí)現(xiàn)步驟

第一步，點(diǎn)擊頁(yè)面上的導(dǎo)入按鈕，讀入Excel文件

利用插件完成。

第二步，按照后端的要求對(duì)數(shù)據(jù)格式加工，轉(zhuǎn)成他們需要的格式

需要自己寫(xiě)邏輯。

第三步，通過(guò)后端接口，將數(shù)據(jù)通過(guò)ajax發(fā)回去

調(diào)接口，常規(guī)操作。

簡(jiǎn)而言之：前端讀excel文件，修改文件格式，調(diào)接口

2.實(shí)現(xiàn)讀入Excel文件

注：此步驟就可實(shí)現(xiàn)前端導(dǎo)入功能。如對(duì)修改格式有興趣，可以繼續(xù)看第三步。

概括：復(fù)制代碼到自己的文件夾下，下載必需的插件。

2.1 使用的是elementUI提供的vue-admin-element中的上傳方法（百度倉(cāng)庫(kù)克隆方式，官網(wǎng)也有）

2.2 下載包   npm install xlsx -S  （默認(rèn)現(xiàn)在已經(jīng)完成2.1步驟了）

2.3 引入U(xiǎn)ploadExcel組件并注冊(cè)為全局（去找UploadExcel這個(gè)文件，復(fù)制一下，封裝組件不必多說(shuō) ）

不會(huì)注冊(cè)全局組件參考下面代碼：（你樂(lè)意在main.js里頭搞也行，這里我就按可維護(hù)性高搞）

import PageTools from "./PageTools"
import UploadExcel from "./UploadExcel"
 
export default {
  // 插件的初始化, 插件給你提供的全局的功能, 都可以在這里配置
  install(Vue) {
    // 進(jìn)行組件的全局注冊(cè)
    Vue.component("PageTools", PageTools) // 注冊(cè)工具欄組件
    Vue.component("UploadExcel", UploadExcel) // 注冊(cè)導(dǎo)入excel組件
  }
}

 2.4 引入組件，使用組件，配置路由，設(shè)置點(diǎn)擊回調(diào)函數(shù)（不必多說(shuō)）

2.5 測(cè)試效果

瀏覽器手動(dòng)輸入你設(shè)置的路由地址，頁(yè)面跳轉(zhuǎn)過(guò)去

 小結(jié)：1.最重要的就是去復(fù)制，然后下載必要插件

            2.引入U(xiǎn)ploadExcel組件（作用是導(dǎo)入Excel文件）是必須的，但是注冊(cè)全局不是必須的，看心情

            3. 導(dǎo)入組件，給他注冊(cè)回調(diào)函數(shù)，他里面的兩個(gè)參數(shù)是必須的，可以參考人家源代碼，更易理解

            4.excel導(dǎo)入插件本質(zhì)：把excel經(jīng)過(guò)分析轉(zhuǎn)換成js能夠識(shí)別的常規(guī)數(shù)據(jù)，拿到數(shù)據(jù)我們可以進(jìn)行任何操作

3.對(duì)數(shù)據(jù)進(jìn)行加工 

注：此步驟其實(shí)考驗(yàn)的是對(duì)JavaScript的運(yùn)用，可惜這個(gè)對(duì)我沒(méi)難度，相信很久之后也是。

3.1 后端要求的格式：

3.2 我們要處理的內(nèi)容：

• 字段中文轉(zhuǎn)英文。excel中讀入的是姓名,而后端需要的是username

• 日期處理。從excel中讀入的時(shí)間是一個(gè)number值，而后端需要的是標(biāo)準(zhǔn)日期。

3.3 單獨(dú)封裝一個(gè)處理函數(shù)：

/**
     * results excel表格的內(nèi)容
      //        [ {"姓名"："小張"， "手機(jī)號(hào)": "13712345678"}, {.....} ]
      // 目標(biāo)
      //        [ {"username"："小張"， "mobile": "13712345678"}, {.....} ]
     */
    transExcel(results) {
      const userRelations = {
        "入職日期": "timeOfEntry",
        "手機(jī)號(hào)": "mobile",
        "姓名": "username",
        "轉(zhuǎn)正日期": "correctionTime",
        "工號(hào)": "workNumber",
        "部門(mén)": "departmentName",
        "聘用形式": "formOfEmployment"
      }
      return results.map(item => {
        const obj = {}
        // 1. 取出這個(gè)對(duì)象所有的屬性名： ["姓名"， ‘手機(jī)號(hào)"]
        // 2. 遍歷這個(gè)數(shù)組，通過(guò) 中文名去 userRelations 找對(duì)應(yīng)英文名， 保存值
        const zhKeys = Object.keys(item)
        zhKeys.forEach(zhKey => {
          const enKey = userRelations[zhKey]
          // 如果是時(shí)間格式，就要做轉(zhuǎn)換
          if (enKey === "correctionTime" || enKey === "timeOfEntry") {
            obj[enKey] = new Date(formatExcelDate(item[zhKey]))
          } else {
            obj[enKey] = item[zhKey]
          }
        })
 
        return obj
      })
    }
 
handleSuccess({ results, header }) {
    
  console.log("從當(dāng)前excel文件中讀出的內(nèi)容是", results)
  // results: [{入職日期: 44502, 姓名：xxxx}]
  // 目標(biāo)：
  // results: [{timeOfEntry: 44502, username：xxxx}]
  // 處理從excel中讀入的格式
  const arr = this.transExcel(results)
  console.log("轉(zhuǎn)換之后的格式是", arr)
})

3.4 日期處理函數(shù)：

// 把excel文件中的日期格式的內(nèi)容轉(zhuǎn)回成標(biāo)準(zhǔn)時(shí)間
// 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)
}

4.調(diào)接口，發(fā)請(qǐng)求，在頁(yè)面中使用

import { importEmployee } from "@/api/employees"
export default {
  name: "Import",
  methods: {
    async handleSuccess({ results, header }) {
      try {
        console.log("從當(dāng)前excel文件中讀出的內(nèi)容是", results)
        // results: [{入職日期: 44502, 姓名：xxxx}]
        // 目標(biāo)：
        // results: [{timeOfEntry: 44502, username：xxxx}]
        const arr = this.transExcel(results)
        console.log("轉(zhuǎn)換之后的格式是", arr)
        // 調(diào)用上傳的接口，
        const rs = await importEmployee(arr)
        console.log("調(diào)用上傳的接口", rs)
        // 上傳成功之后，回去剛才的頁(yè)面
        this.$router.back()
        this.$message.success("操作成功")
      } catch (err) {
        this.$message.error(err.message)
      }
    }
}

讀到這里，這篇“如何用Vue實(shí)現(xiàn)導(dǎo)入Excel功能”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。