Vue中如何导入并读取Excel数据

一、导入并读取Excel功能从整体上来说两种方式，一是前端解析文件后将数据返回给后端，另一种是前端直接将Excel文档返回后台，由后台进行处理。使用哪种方法需要根据具体业务需求，下面简单介绍第一种方法：由前端解析数据
1、引入依赖

npm install -S file-saver xlsx

npm install -D script-loader

npm install xlsx
2、在main.js中引入XLSX

import XLSX from ‘xlsx’
Vue.use(XLSX)
3、前面环境和依赖完成之后，我们开始创建Import.vue页面，放一个button上传按钮。

各参数说明可参考官方文档：https://www.jianshu.com/p/84b727a4b58a

<el-upload
    class="upload-demo"
    action=""
    :on-change="handleChange"
    :on-remove="handleRemove"
    :on-exceed="handleExceed"
    :limit="limitUpload"
    accept="application/vnd.openxmlformats-    
    officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
    :auto-upload="false">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>

4、定义所需要的方法，代码如下（为了美观，加入了一些提示语和提示框）

    //上传文件时处理方法  
    handleChange(file, fileList){
        this.fileTemp = file.raw;
        if(this.fileTemp){
            if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') 
                || (this.fileTemp.type == 'application/vnd.ms-excel')){
                this.importfxx(this.fileTemp);
            } else {
                this.$message({
                    type:'warning',
                    message:'附件格式错误，请删除后重新上传！'
                })
            }
        } else {
            this.$message({
                type:'warning',
                message:'请上传附件！'
            })
        }
    },
    //超出最大上传文件数量时的处理方法
    handleExceed(){
        this.$message({
            type:'warning',
            message:'超出最大上传文件数量的限制！'
        })
        return;
    },
    //移除文件的操作方法
    handleRemove(file,fileList){
        this.fileTemp = null
    },

最重要的读取excel文件的方法：

     importfxx(obj) {
        let _this = this;
        let inputDOM = this.$refs.inputer;
        // 通过DOM取文件数据

        this.file = event.currentTarget.files[0];

        var rABS = false; //是否将文件读取为二进制字符串
        var f = this.file;

        var reader = new FileReader();
        //if (!FileReader.prototype.readAsBinaryString) {
        FileReader.prototype.readAsBinaryString = function(f) {
            var binary = "";
            var rABS = false; //是否将文件读取为二进制字符串
            var pt = this;
            var wb; //读取完成的数据
            var outdata;
            var reader = new FileReader();
            reader.onload = function(e) {
                var bytes = new Uint8Array(reader.result);
                var length = bytes.byteLength;
                for (var i = 0; i < length; i++) {
                    binary += String.fromCharCode(bytes[i]);
                }
                //如果没有在main.js中引入，则此处需要引入，用于解析excel
                // var XLSX = require("xlsx");
                if (rABS) {
                    wb = XLSX.read(btoa(fixdata(binary)), {
                    //手动转化
                    type: "base64"
                    });
                } else {
                    wb = XLSX.read(binary, {
                    type: "binary"
                    });
                }
                outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); 
                //outdata就是读取的数据（不包含标题行即表头，表头会作为对象的下标）
                //此处可对数据进行处理
                // let arr = [];
                // outdata.map(v => {
                //     let obj = {}
                //     obj.code = v['Code']
                //     obj.name = v['Name']
                //     obj.pro = v['province']
                //     obj.cit = v['city']
                //     obj.dis = v['district']
                //     arr.push(obj)
                // });
                // _this.da=arr;
                // _this.dalen=arr.length;
                return arr;
            };
            reader.readAsArrayBuffer(f);
        };
        if (rABS) {
            reader.readAsArrayBuffer(f);
        } else {
            reader.readAsBinaryString(f);
        }
    }

5、获取的数据及展示如下：

6、相关代码已经上传Github，地址如下：

https://github.com/736755244/Import/upload
————————————————
版权声明：本文为CSDN博主「前端的小小对象」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a736755244/article/details/99568133