快捷導(dǎo)航

如何使用vue實(shí)現(xiàn)前端導(dǎo)入excel數(shù)據(jù)

更新時(shí)間：2023年04月25日 16:03:13 作者：小馬ovO

在實(shí)際開發(fā)中導(dǎo)入功能是非常常見的,導(dǎo)入功能前端并不難,下面這篇文章主要給大家介紹了關(guān)于如何使用vue實(shí)現(xiàn)前端導(dǎo)入excel數(shù)據(jù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

繼前邊的vue的導(dǎo)出功能后，自己又去在網(wǎng)上搜了vue導(dǎo)入excel一些文章，自己通過(guò)對(duì)代碼的整理和調(diào)整，實(shí)現(xiàn)了vue導(dǎo)入excel的功能。

一、主界面先引入導(dǎo)入組件

1.這段主要是中間的那段excel-import標(biāo)簽的那部分代碼，loadList是后邊導(dǎo)入成功后，子組件要調(diào)用的方法，這個(gè)方法是導(dǎo)入成功后，刷新表格數(shù)據(jù)的

  <a-space class="crud-buttons">
                <a-button @click="handleEdit" type="primary">
                    <a-icon type="edit"></a-icon>
                    修改
                </a-button>
                <excel-import @fatherMethod="loadList"></excel-import>
                <a-button @click="exportData" type="danger" :loading="btnLoading">  <a-icon type="upload" />導(dǎo)出</a-button>
                <a-button type="primary" @click="grantWelfare">
                    <a-icon type="plus"></a-icon>
                    發(fā)放
                </a-button>
            </a-space>

路徑根據(jù)你們的要求自行修改

import excelImport from "../../components/excel-import"

二、封裝excel-import組件

1.首先是template代碼（這里用的是ant vue desgin框架的組件）

<template>
    <div class="import">
        <a-button @click="exportData" type="primary"><a-icon type="import" />導(dǎo)入</a-button>
        <a-modal v-model="visible" title="導(dǎo)入數(shù)據(jù)" @ok="handleOk"  @cancel="handleCancel" width="400px">
            <a-upload-dragger :file-list="fileList" :multiple="false"
                              :before-upload="beforeUpload" :remove="removeFile">
                <p class="ant-upload-drag-icon">
                    <a-icon type="inbox"/>
                </p>
                <p class="ant-upload-hint">
                    僅允許導(dǎo)入xls、xlsx格式文件
                </p>
            </a-upload-dragger>
        </a-modal>
 
    </div>
</template>

2.引入接口

import WelfareApi from '@/api/master/welfare'

3.js代碼methods

exportData(){
                this.visible=true
            },
          async handleOk(){
                if (this.data.length === 0) {
                    this.$message.error("請(qǐng)選擇要上傳的文件")
                } else {
                    const data=await WelfareApi.importExcelData(this.data)
                    this.$message.success(data.message)
                    this.visible=false;
                    this.fileList=[]
                    this.$emit('fatherMethod');
                }
            },
            handleCancel(){
            this.fileList=[]
            this.visible=false
            },
            // 文件上傳前的鉤子
            beforeUpload(file) {
                const isXslx =
                    file.type ===
                    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || file.type === "application/vnd.ms-excel";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isXslx) {
                    this.$message.error("附件格式錯(cuò)誤，請(qǐng)刪除后重新上傳！");
                }
                if (isXslx) {
                    if (this.fileList.length == 0) {
                        this.fileList = [...this.fileList, file]
                        this.importfxx(this.fileList);
                    } else {
                        this.$message.error("僅能選擇一個(gè)文件進(jìn)行上傳!")
                    }
                }
                if (!isLt2M) {
                    this.$message.error("上傳文件大小不能超過(guò) 2MB!");
                }
                return false
            },
            removeFile(file) {
                const index = this.fileList.indexOf(file);
                const newFileList = this.fileList.slice();
                newFileList.splice(index, 1);
                this.fileList = newFileList;
            },
            importfxx(obj) {
                let _this = this;
                let inputDOM = this.$refs.inputer;
                // 通過(guò)DOM取文件數(shù)據(jù)
 
                this.file = event.currentTarget.files[0];
 
                let rABS = false; //是否將文件讀取為二進(jìn)制字符串
                let f = this.file;
 
                let reader = new FileReader();
                FileReader.prototype.readAsBinaryString = function (f) {
                    let binary = "";
                    let rABS = false; //是否將文件讀取為二進(jìn)制字符串
                    let pt = this;
                    let wb; //讀取完成的數(shù)據(jù)
                    let outdata;
                    let reader = new FileReader();
                    reader.onload = function (e) {
                        let bytes = new Uint8Array(reader.result);
                        let length = bytes.byteLength;
                        for (let i = 0; i < length; i++) {
                            binary += String.fromCharCode(bytes[i]);
                        }
                        //此處引入，用于解析excel
                        let XLSX = require("xlsx");
                        if (rABS) {
                            wb = XLSX.read(btoa(fixdata(binary)), {
                                //手動(dòng)轉(zhuǎn)化
                                type: "base64"
                            });
                        } else {
                            wb = XLSX.read(binary, {
                                type: "binary"
                            })
                        }
                        outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
                        //outdata就是讀取的數(shù)據(jù)（不包含標(biāo)題行即表頭，表頭會(huì)作為對(duì)象的下標(biāo)）
                        //此處可對(duì)數(shù)據(jù)進(jìn)行處理
                        let arr = [];
                        outdata.map(v => {
                            let obj = {}
                            obj.id = v['序號(hào)']
                            obj.dpStage = v['DP班號(hào)']
                            obj.traineeName = v['學(xué)員姓名']
                            obj.name = v['收貨人姓名']
                            obj.mobile = v['收貨人電話']
                            obj.province = v['省']
                            obj.city = v['市']
                            obj.district = v['區(qū)']
                            obj.detailAddr = v['詳細(xì)地址']
                            obj.expressName = v['快遞名稱']
                            obj.expressNumber = v['快遞編號(hào)']
                            obj.expressTime = v['發(fā)貨時(shí)間']
                            obj.statusName = v['狀態(tài)']
                            arr.push(obj)
                        });
                        _this.data=arr;
                        _this.dalen=arr.length;
                        return arr;
                    };
                    reader.readAsArrayBuffer(f);
                };
                if (rABS) {
                    reader.readAsArrayBuffer(f);
                } else {
                    reader.readAsBinaryString(f);
                }
            }

這里有幾點(diǎn)注意的地方

在對(duì)outdata處理的時(shí)候，例如obj.id=v['序號(hào)']

這里的id就是傳給后端的對(duì)象集合中對(duì)象的屬性名，后端也要用對(duì)應(yīng)的model接收

這里的序號(hào)就是excel表格的表頭列名，一定要文字對(duì)應(yīng)，不然會(huì)導(dǎo)入失敗

三.附加提示（后端也要寫的小伙伴可以參考下邊建議哈）

我們傳給后端的數(shù)據(jù)，應(yīng)該是一個(gè)集合形式，在后端一般需要對(duì)數(shù)據(jù)進(jìn)行處理，因?yàn)槲覀円褦?shù)據(jù)insert到我們的數(shù)據(jù)庫(kù)中去，當(dāng)然可能會(huì)有重復(fù)的數(shù)據(jù)（比如說(shuō)導(dǎo)入的是用戶信息，數(shù)據(jù)庫(kù)里存在這個(gè)人的，你要導(dǎo)入的excel也存在）如果要求是修改的話，這時(shí)候就要根據(jù)的唯一標(biāo)識(shí)（id，或者是電話、身份證號(hào)等等）來(lái)分情況做處理到底是新增還是修改。最后我還建議可以設(shè)置兩個(gè)變量，一個(gè)來(lái)記錄成功導(dǎo)入數(shù)據(jù)庫(kù)的記錄數(shù)量，一個(gè)記錄覆蓋（修改）記錄的數(shù)量，然后返回給前端。

四.總結(jié)

以上就是今天要講的內(nèi)容，本文介紹了vue導(dǎo)入excel的使用，主要就是在前端把要導(dǎo)入的excel進(jìn)行處理，最后把整理好的數(shù)據(jù)傳給后端，添加進(jìn)數(shù)據(jù)庫(kù)中。

到此這篇關(guān)于如何使用vue實(shí)現(xiàn)前端導(dǎo)入excel數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue前端導(dǎo)入excel數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: