vue导入excel文件并读取

1.前期准备

依赖安装
npm install -D script-loader
npm install -S file-saver xlsx

2.引入插件

方式1
全局挂载
main.js

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

组件上使用

let XLSX = this.XLSX;

方式2 组件内引用

import XLSX from 'xlsx'
// or
let XLSX = require("xlsx");

3.使用

html

        <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>

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);
            }
        },
    },
};

4.效果

导入表格

输出