Element-ui获取上传的Excel并预览

1,220 阅读1分钟

提示:SheetJS生成/解析Excel

本期:

<el-upload
    ref="upload"
    limit="1"
    action=""
    :auto-upload="false"
    :on-change="parseExcel" 
    ></el-upload>
    
    
    
    export default {
    data: function () {
        return {}
    },
    methods: {
        parseExcel (file, fileList) {
            // 分析头信息是否是excel
            if (
                file.raw.type != 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                && file.raw.type != 'application/vnd.ms-excel'
            ) {
                this.$notify.error({
                  title: '错误',
                  message: '请上传Excel类型的文件'
                });
                this.$refs.upload.clearFiles();
                return false
            }

            let reader = new FileReader()
            let rABS = typeof FileReader !== "undefined" && (FileReader.prototype||{}).readAsBinaryString
            // 重点是下面的 file.raw
            if (rABS) {
                reader.readAsBinaryString(file.raw)
            } else {
                reader.readAsArrayBuffer(file.raw)
            }
            reader.onload = function(e) {
                let data = e.target.result
                if (!rABS) {
                    data = new Uint8Array(data)
                }
                let workBook = XLSX.read(data, {type: rABS ? 'binary' : 'array'})
                workBook.SheetNames.forEach(name => {
                    let sheet = workBook.Sheets[name]
                    let json = XLSX.utils.sheet_to_json(sheet, {
                        raw: false,
                        header: 1
                    })
                    // TODO 处理数据
                })
        }
    }
}