Vue导入xlsx文件,并附上源码

依赖安装

npm install -D script-loader 
npm install -S file-saver xlsx

引入插件方式

方式一：全局挂载（main.js）

不推荐:因为用到的页面不多，在组件使用时引入为好

import XLSX from 'xlsx' 
// XLSX对象没有install方法无法使用Vue.use()
Vue.prototype.XLSX = XLSX;

组件上使用

let XLSX = this.XLSX;

方式2 组件内引用

import XLSX from 'xlsx'

组件中的使用

<template>
    <el-upload 
        class="upload-demo" 
        action="" 
        :on-change="handleChange" 
        :on-exceed="handleExceed" 
        :on-remove="handleRemove" 
        :before-remove="beforeRemove" 
        :file-list="fileListUpload" 
        ref="upload" 
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" 
        :auto-upload="false" 
    > 
    <el-button size="small" type="primary"> 导入 </el-button> </el-upload>

</template>

<script>
    import XLSX from 'xlsx'
export default {
    data() {
        return {
            fileListUpload: [],
            fileTemp: null
        };
    },
    methods: {
        handleRemove(file, fileList) {
            this.fileTemp = null;
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        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: "请上传附件！",
                });
            }
        },
        importfxx(res) {
            let that = this;
            this.file = event.currentTarget.files[0];
            let f = this.file;
            let reader = new FileReader();
            let rABS = false; // 是否将文件读取为二进制字符串
            
            FileReader.prototype.readAsBinaryString = function (f) {
                let binary = "";
                let wb; // 读取完成的数据
                let outdata;
                
                reader.onload = function (e) {
                    let bytes = new Uint8Array(reader.result);
                    let length = bytes.byteLength;
                    for (var i = 0; i < length; i++) {
                        binary += String.fromCharCode(bytes[i]);
                    }
                    
                    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]]
                    );
                    
                    // 表格数据
                    console.log(outdata, "outdata");
                };
                reader.readAsArrayBuffer(f);
            };
            if (rABS) {
                reader.readAsArrayBuffer(f);
            } else {
                reader.readAsBinaryString(f);
            }
        },
    },
};
</script>

结果

输入 输出