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