vue导入Excel数据并展示成表格

前言：

 

用到的库参考链接：

FileReader：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader    这个在之前的下载excel的随笔中有用到

xlsx: https://www.npmjs.com/package/xlsx 本次用到读取excel数据插件，功能很强大，文档太大了，需要多琢磨

 

前端上传excel文件，读取Excel数据并展示成表格

通常情况下上传文件调用后台接口，接口返回改文件的数据，前端处理展示成表格，有些需求，例如，后台只需要表格需要的数据，上传过程后台不落库，并不提供接口，这是就需要我们自己上传文件读取到改文件的数据展示，并提交给后台

 

1.安装 file-saver 和 xlsx

npm install file-saver xlsx

2.main.js中引入依赖

import XLSX from 'xlsx'
Vue.use(XLSX)

3.用到elementUI的upload上传控件，设置action, http-request等标签属性，由于不需要直接发请求上传到服务器，暂不这是action属性，不需要考虑跨域问题

“httpRequest”是自定义上传方法，用来处理文件中的数据，上传过程会触发改方法

<el-upload
    class="upload-excel"
    action=""
        drag
    :http-request="httpRequest"
    accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
    <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>

4.上传方法

httpRequest(e) {
    var _this = this;
    var rABS = false; //是否将文件读取为二进制字符串
    let f = e.file // 文件信息
    if(!f) return false;
    else if(!/\.(xls|xlsx)$/.test(f.name.toLowerCase())) {
        this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
        return false
    }

    var reader = new FileReader();
    FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function(e) {
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for(var i = 0; i < length; i++) binary += String.fromCharCode(bytes[i]);
            var XLSX = require('xlsx');
            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]], {defval: ''}); //outdata的格式可打印了自行查看，注意这里只取到了第一个sheet的数据
            // 以下是对outdata的格式化，可按个人需要自行转换
            outdata.map((p, idx)=> {
                // ...
            })
        }
        reader.readAsArrayBuffer(f);
    }
    if(rABS) reader.readAsArrayBuffer(f);
    else reader.readAsBinaryString(f);
},

代码第24行中，变量wb的数据是所有的数据