在Vue2.0项目结合QuasarUI框架中实现js-xlsx解析Excel并上传

Git地址:https://github.com/SheetJS/sheetjs

QuasarUI文件上传文档

安装

npm install xlsx

引入

import XLSX from 'xlsx';

实例

<template>
<div>
    <!--文件上传UI组件，不懂的看上面的文档即可-->
    <q-uploader url="/ht/file/upload" color="teal" flat bordered style="max-width:300px;" 
        max-files="1" accept=".xls,.xlsx" @added="added" @uploading="uploading" fieldName="file" no-thumbnails/>
    <q-space />
</div>
</template>
<script>
import XLSX from "xlsx";
export default {
    data(){
        return{
        
        }
    },
    methods:{
        uploading(val){
            console.log(val.xhr.response);//上传excel文件完后台返回的数据
        },
        added(val) {
            let fileName = "";//excel文件名
            // 读取表格文件
            if (val.length <= 0) {//文件是否存在
                return false;
            } else if (!/\.(xls|xlsx)$/.test(val[0].name.toLowerCase())) {//excel判断是不是excel，不是则提示用户文件格式不正确
                this.$q.notify({position: 'center',type:"negative",message:'上传格式不正确，请上传xls或者xlsx格式',timeout:3000});
                return false;
            } else {//如果是excel文件则获取文件名给上面的变量
                // 更新获取文件名
                fileName = val[0].name;
            }

            const fileReader = new FileReader();//创建读excel的对象
            fileReader.onload = ev => {
                try {
                    const data = ev.target.result;//数据集
                    const workbook = XLSX.read(data, {
                            type: "binary"//二进制方式读
                    });

                    let bookName = workbook.SheetNames[0];//获取excel第一个工作簿的名称
                    let ws = workbook.Sheets[bookName];//获取工作簿下的数据
                    
                    //const d = XLSX.utils.sheet_to_json(ws);//数据转化成JS数组对象（不带第一行(表头)的数据）
                    const d = XLSX.utils.sheet_to_json(ws, {header: 1});//数据转化成JS数组对象（带第一行(表头)的数据）

                    console.log(d);//解析的结果
                } catch (e) {
                    this.$q.notify({position: 'center',type:"negative",message:'表格解析失败！',timeout:3000});
                    return false;
                }
            };
            fileReader.readAsBinaryString(val[0]);
        }
            
    }
}
</script>