快捷導(dǎo)航

vue實現(xiàn)excel文件的導(dǎo)入和讀取完整步驟

更新時間：2023年10月13日 15:46:32 作者：bu_xiang_tutou

Vue的數(shù)據(jù)綁定功能非常強大,很適合用來讀取Excel內(nèi)容,這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)excel文件的導(dǎo)入和讀取的相關(guān)資料,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下

1.效果展示

上傳數(shù)據(jù)前

上傳數(shù)據(jù)后

或者

2.下載

npm install xlsx@0.17.0

如果一直報關(guān)于xlsx的read的錯誤，這里是因為xlsx的0.18.0版本已經(jīng)沒有read屬性了，所以最好是使用0.18.0版本以下的xlsx。

3. js文件

excel.js

import { stringify } from "json5";
// 按照二進制讀取文件
export function readFile(file) {
  return new Promise((resolve) => {
    let reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = (e) => {
      resolve(e.target.result);
    };
  });
}
// 字段對應(yīng)表
export let character = {
  staffName: {
    text: "員工姓名",
    type: "string",
  },
  sex: {
    text: "性別",
    type: "string",
  },
  idNumber: {
    text: "身份證號",
    type: "string",
  },
  staffEmail: {
    text: "員工郵箱",
    type: "string",
  },
  phone: {
    text: "電話號碼",
    type: "string",
  },
  jobPreference: {
    text: "工作偏好",
    type: "string",
  },
  timePreference: {
    text: "時間偏好",
    type: "string",
  },
  datePreference: {
    text: "時間段偏好",
    type: "string",
  }
};
// 時間字符串格式化
export function formatTime(str, tpl) {
  let arr = str.match(/\d+/g).map((item) => {
    return item.length < 2 ? "0" + item : item;
  });
  tpl = tpl || "{0}年{1}月{2}日 {3}時{4}分{5}秒";
  return tpl.replace(/\{(\d+)\}/g, (_, group) => {
    return arr[group] || "00";
  });
}

utils.js 實現(xiàn)加載

// 設(shè)置異步延遲間隔
export function delay(interval = 0) {
    return new Promise((resolve) => {
      let timer = setTimeout((_) => {
        clearTimeout(timer);                                                                                                          
        resolve();
      }, interval);
    });
  }

4 .界面處理

<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    action
    accept=".xlsx,.xls"
    :show-file-list="false"
    :on-exceed="handleExceed"
    :auto-upload="false"
    :on-change="handle"
  >
    <template #trigger>
      <el-button type="primary">選擇文件</el-button>
    </template>
  </el-upload>
  <el-table :data="employeeData" border style="width: 100%">
    <el-table-column prop="staffName" label="姓名" width="100px" />
    <el-table-column prop="sex" label="性別" width="80px" />
    <el-table-column prop="idNumber" label="身份證號" width="200px" />
    <el-table-column prop="phone" label="電話號碼" width="150px" />
    <el-table-column prop="staffEmail" label="郵箱" width="200px" />
    <el-table-column prop="jobPreference" label="工作偏好" />
    <el-table-column prop="timePreference" label="時間偏好" />
    <el-table-column prop="datePreference" label="時間段偏好" />
    <el-table-column label="操作">
        <el-button>編輯</el-button>
        <el-button type="danger">刪除</el-button>
    </el-table-column>
  </el-table>
</template>
<script>
//excel文件的處理
import { character, readFile } from "@/assets/js/excel";
//異步消息處理
import { delay } from "@/assets/js/utils";
//excel文件數(shù)據(jù)解析
import XLSX from "xlsx";
import { ElLoading } from 'element-plus'
export default {
  data() {
    return {
      employeeData: [],
    };
  },
  component: {},
  created() {
  },
  methods: {
    //采集excel數(shù)據(jù)
    async handle(ev) {
      //這個是上傳的文件
      let file = ev.raw;
      // console.log(file, "file");
      //沒有文件
      if (!file) return;
      //解析和上傳到后端的時候進行l(wèi)oading加載顯示
      let loadingInstance =  ElLoading.service({
        text: "請稍等一下，數(shù)據(jù)正在處理中"
      });
      await delay(100);//延遲
      //讀取file中的數(shù)據(jù)
      //把文件解析成二進制數(shù)據(jù)，把二級制數(shù)據(jù)變成excel表格式的數(shù)據(jù)
      let data = await readFile(file);
      let workbook = XLSX.read(data, { type: "binary" });
      //拿到第一個sheet表的數(shù)據(jù)，把第一個表格的數(shù)據(jù)轉(zhuǎn)換成JSON數(shù)據(jù)
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
      data = XLSX.utils.sheet_to_json(worksheet);
      //把讀取出來的數(shù)據(jù)變成最后可以傳遞給服務(wù)器的數(shù)據(jù)
      let employees = [];
      data.forEach((item) => {
        let obj = {};
        for (let key in character) {
          if (!character.hasOwnProperty(key)) break;
          let v = character[key];
          const text = v.text;
          const type = v.type;
          v = item[text] || "";
          //對數(shù)據(jù)類型的處理
          type === "string" ? (v = String(v)) : null;
          type === "number" ? (v = Number(v)) : null;
          obj[key] = v;
        }
        employees.push(obj);
      });
      console.log(employees, "最后傳入后端的excel數(shù)據(jù)");
      this.employeeData = employees;
      loadingInstance.close();
    },
  },
};
</script>