欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue導(dǎo)入處理Excel表格功能步驟詳解

 更新時間：2022年07月10日 10:42:04   作者：Saga?Two  
最近開發(fā)遇到一個點擊導(dǎo)入按鈕讓excel文件數(shù)據(jù)導(dǎo)入在表格的需求,所以下面這篇文章主要給大家介紹了關(guān)于vue導(dǎo)入處理Excel表格功能步驟的相關(guān)資料,需要的朋友可以參考下

1. 前言

最近遇到前端導(dǎo)入并處理excel表格的情況，趁此機會剛好研究一下vue導(dǎo)入并處理excel數(shù)據(jù)；當然自己手擼一個工具沒有那么多時間，本文只是借助現(xiàn)有的工具來做一下工具使用總結(jié)。

2.vue導(dǎo)入Excel表格

vue導(dǎo)入Excel表格主要有兩種常用的方法，一個是借助ElementUI文件上傳進行表格導(dǎo)入，另一個是自帶的input做文件上傳；以下對兩個方法做詳細介紹；

2.1 使用ElementUI中的upload組件

安裝ElementUI

npm i element-ui -S

安裝Excel表格解析插件

npm i xlsx -S

導(dǎo)入需要用的工具包

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import { read, utils } from "xlsx"; // 注意處理方法引入方式
Vue.use(ElementUI);

引入組件

<el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-success="handleChange"
        :file-list="fileList"
        class="el-upload"
      >

添加處理邏輯

// 導(dǎo)入成功時執(zhí)行
handleChange(res, file, fileList) {
      // 將文件放入
      for (let i = 0; i < fileList.length; i++) {
        if (file.name != fileList[i].name) {
          this.fileList.push({
            name: file.name,
            url: "",
            uid: file.uid
          });
        }
      }
      const files = { 0: file };
      this.readExcel(files);
    },
    readExcel(file) {
      const fileReader = new FileReader();

      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const workbook = read(data, { type: "binary" });
          const params = [];
          // 取對應(yīng)表生成json表格內(nèi)容
          workbook.SheetNames.forEach(item => {
            this.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
          });
          // 該算法僅針對表頭無合并的情況
          if (this.tableData.length > 0) {
            // 獲取excel中第一個表格數(shù)據(jù)tableData[0][0]，并且將表頭提取出來
            for (const key in this.tableData[0][0]) {
              this.tableHead.push(key);
            }
          }
          // 重寫數(shù)據(jù)
        } catch (e) {
          console.log("error:" + e);
          return false;
        }
      };
      fileReader.readAsBinaryString(file[0].raw);
    }

以上處理的數(shù)據(jù)我這邊用組件展示在了頁面上，效果如下圖：

2.2 使用input文件上傳

1.安裝Excel表格解析插件

npm i xlsx -S

2.導(dǎo)入需要用的工具包

import { read, utils } from "xlsx"; // 注意處理方法引入方式

3.使用input

<div class="flex-display">
      <div class="left-box">文件上傳(input)：</div>
      <input type="file" v-on:change="onChange" class="file-ipt" />
    </div>

4.添加處理邏輯

基本與上面處理邏輯相同

onChange(e) {
      const file = e.target.files[0];
      const fileReader = new FileReader();

      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const workbook = read(data, { type: "binary" });
          const params = [];
          // 取對應(yīng)表生成json表格內(nèi)容
          workbook.SheetNames.forEach(item => {
            params.push({
              name: item,
              dataList: utils.sheet_to_json(workbook.Sheets[item])
            });
            this.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
          });
          // 該算法僅針對表頭無合并的情況
          if (this.tableData.length > 0) {
            // 獲取excel中第一個表格數(shù)據(jù)tableData[0][0]，并且將表頭提取出來
            for (const key in this.tableData[0][0]) {
              this.tableHead.push(key);
            }
          }
          return params;
          // 重寫數(shù)據(jù)
        } catch (e) {
          console.log("error:" + e);
          return false;
        }
      };
      fileReader.readAsBinaryString(file);
    }

3. 總體代碼與效果

效果如下：

總的樣式以及代碼如下：

<template>
  <div>
    <div class="flex-display">
      <div class="left-box">表格上傳(ElementUI):</div>
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-success="handleChange"
        :file-list="fileList"
        class="el-upload"
      >
        <el-button size="small" type="primary" class="el-btn"
          >點擊上傳</el-button
        >
        <div slot="tip" class="el-upload-tip">
          只能上傳xlsx文件，且不超過5MB
        </div>
      </el-upload>
    </div>
    <el-table v-if="tableHead.length" :data="tableData[0]" style="width: 100%">
      <el-table-column
        v-for="(data, key) in tableHead"
        :prop="data"
        :label="data"
        :key="key"
        width="180"
      >
      </el-table-column>
    </el-table>
    <div class="flex-display">
      <div class="left-box">文件上傳(input)：</div>
      <input type="file" v-on:change="onChange" class="file-ipt" />
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import { read, utils } from "xlsx";

Vue.use(ElementUI);
export default {
  data() {
    return {
      fileList: [], //上傳文件列表
      tableHead: [], //表頭
      tableData: [] // 表數(shù)據(jù)
    };
  },
  methods: {
    onChange(e) {
      const file = e.target.files[0];
      const fileReader = new FileReader();

      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const workbook = read(data, { type: "binary" });
          const params = [];
          // 取對應(yīng)表生成json表格內(nèi)容
          workbook.SheetNames.forEach(item => {
            params.push({
              name: item,
              dataList: utils.sheet_to_json(workbook.Sheets[item])
            });
            this.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
          });
          // 該算法僅針對表頭無合并的情況
          if (this.tableData.length > 0) {
            // 獲取excel中第一個表格數(shù)據(jù)tableData[0][0]，并且將表頭提取出來
            for (const key in this.tableData[0][0]) {
              this.tableHead.push(key);
            }
          }
          return params;
          // 重寫數(shù)據(jù)
        } catch (e) {
          console.log("error:" + e);
          return false;
        }
      };
      fileReader.readAsBinaryString(file);
    },
    handleChange(res, file, fileList) {
      // 將文件放入
      for (let i = 0; i < fileList.length; i++) {
        if (file.name != fileList[i].name) {
          this.fileList.push({
            name: file.name,
            url: "",
            uid: file.uid
          });
        }
      }

      // this.fileList = fileList.slice(-3);
      const files = { 0: file };
      this.readExcel(files);
    },
    readExcel(file) {
      const fileReader = new FileReader();

      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const workbook = read(data, { type: "binary" });
          const params = [];
          // 取對應(yīng)表生成json表格內(nèi)容
          workbook.SheetNames.forEach(item => {
            params.push({
              name: item,
              dataList: utils.sheet_to_json(workbook.Sheets[item])
            });
            this.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
          });
          // 該算法僅針對表頭無合并的情況
          if (this.tableData.length > 0) {
            // 獲取excel中第一個表格數(shù)據(jù)tableData[0][0]，并且將表頭提取出來
            for (const key in this.tableData[0][0]) {
              this.tableHead.push(key);
            }
          }
          return params;
          // 重寫數(shù)據(jù)
        } catch (e) {
          console.log("error:" + e);
          return false;
        }
      };
      fileReader.readAsBinaryString(file[0].raw);
    }
  }
};
</script>
<style lang="scss" scoped>
.upload-demo {
  width: 100%;
}
.flex-display {
  margin: 50px 30px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  .left-box {
    margin: 20 30;
    height: 36px;
    line-height: 36px;
  }
}
.el-upload {
  margin-left: 40px;
  .el-btn {
    font-size: 16px;
  }
  .el-upload-tip {
    display: inline;
    font-size: 12px;
  }
}
.file-ipt {
  width: 200px;
  height: 36px;
  line-height: 36px;
  button {
    background-color: #409eff;
  }
}
input #file-upload-button {
  background-color: #409eff;
}
</style>

4. 總結(jié)

較為容易踩坑的點就是xlsx這個包的導(dǎo)入方式，這個包處理excel表格功能時相當強大的，除了導(dǎo)入與數(shù)據(jù)解析，還有導(dǎo)出為excel等功能，在我們?nèi)粘＞W(wǎng)站開發(fā)中非常常用。其次容易踩坑的就是vue中事件的監(jiān)聽與處理方式，我們可以看到使用組件賀不使用組件區(qū)別還是比較大的，當然使用現(xiàn)有組件往往能獲得更好的效果，所以這里還是推薦大家使用方法一去實現(xiàn)這個功能。

最后本文僅對數(shù)據(jù)做簡單處理，若要處理更為復(fù)雜的表格數(shù)據(jù)，就需要研究更強大的算法，不喜勿碰，謝謝。

到此這篇關(guān)于vue導(dǎo)入處理Excel表格功能步驟的文章就介紹到這了,更多相關(guān)vue導(dǎo)入處理Excel內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue3?vscode插件volar配置教程

    vue3?vscode插件volar配置教程

    這篇文章主要介紹了vue3?vscode插件volar配置,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2023-07-07
  • Vue中$forceUpdate()的使用方式

    Vue中$forceUpdate()的使用方式

    這篇文章主要介紹了Vue中$forceUpdate()的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • Vue3中vue-router的使用方法詳解

    Vue3中vue-router的使用方法詳解

    Vue?Router?是?Vue?的官方路由，它與?Vue.js?核心深度集成，讓用?Vue.js?構(gòu)建單頁應(yīng)用變得輕而易舉，本文將通過簡單的示例為大家介紹一下vue-router的使用，需要的可以參考一下
    2023-06-06
  • vue組件（全局，局部，動態(tài)加載組件）

    vue組件（全局，局部，動態(tài)加載組件）

    組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。這篇文章主要介紹了vue組件（全局，局部，動態(tài)加載組件）,需要的朋友可以參考下
    2018-09-09
  • 超詳細的vue組件間通信總結(jié)

    超詳細的vue組件間通信總結(jié)

    作為一個vue初學(xué)者不得不了解的就是組件間的數(shù)據(jù)通信(暫且不談vuex),通信方式根據(jù)組件之間的關(guān)系有不同之處,這篇文章主要給大家介紹了關(guān)于vue組件間通信的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • 用vscode開發(fā)vue應(yīng)用的方法步驟

    用vscode開發(fā)vue應(yīng)用的方法步驟

    這篇文章主要介紹了用vscode開發(fā)vue應(yīng)用的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • 如何利用vue實現(xiàn)css過渡和動畫

    如何利用vue實現(xiàn)css過渡和動畫

    過渡Vue在插入、更新或者移除 DOM 時,提供多種不同方式的應(yīng)用過渡效果這篇文章主要給大家介紹了關(guān)于如何利用vue實現(xiàn)css過渡和動畫的相關(guān)資料,需要的朋友可以參考下
    2021-11-11
  • 詳解Vue使用命令行搭建單頁面應(yīng)用

    詳解Vue使用命令行搭建單頁面應(yīng)用

    本篇文章主要介紹了詳解Vue使用命令行搭建單頁面應(yīng)用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • vue使用urlEncode問題

    vue使用urlEncode問題

    這篇文章主要介紹了vue使用urlEncode問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vuex數(shù)據(jù)持久化實現(xiàn)的思路與代碼

    Vuex數(shù)據(jù)持久化實現(xiàn)的思路與代碼

    Vuex數(shù)據(jù)持久化可以很好的解決全局狀態(tài)管理,當刷新后數(shù)據(jù)會消失,這是我們不愿意看到的。這篇文章主要給大家介紹了關(guān)于Vuex數(shù)據(jù)持久化實現(xiàn)的思路與代碼，需要的朋友可以參考下
    2021-05-05

最新評論