vue excel表格导入导出

导入,导出功能:
安装依赖:
cnpm install xlsx —save
使用:

html

<div class="import-btn">
    <el-button type="primary" size="small" @click="outfile">导出</el-button>
</div>  
<div class="import-btn">
    <el-button type="primary" size="small">导入文件</el-button>
    <input type="file" @change="importf(this)"/>
</div>

js:

var XLSX = require('xlsx');

outfile(){
            var that = this
            var titleArr = Object.keys(that.tableData[0]);
            
            let tableData = [
                titleArr,
            ] // 表格表头
            this.tableData.forEach (item => {
                let rowData = []
                titleArr.map((key,index) => {
                    rowData.push(item[key])
                })
                tableData.push(rowData)
            })
            let ws = XLSX.utils.aoa_to_sheet(tableData)
            let wb = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(wb,ws,'数据') // 工作簿名称
            XLSX.writeFile(wb, '数据.xlsx') // 保存的文件名
        },
        importf() {
            let _this = this;
            let inputDOM = this.$refs.inputer;   // 通过DOM取文件数据
            this.file = event.currentTarget.files[0];  
            var rABS = false; //是否将文件读取为二进制字符串
            var f = this.file;
        
            //判断格式
            const types = f.name.split(".")[1];
            const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt"].some(
              item => item === types
            );
            if (!fileType) {
              alert("格式错误!请重新选择");
              return;
            }
            
            var reader = new FileReader();
            //if (!FileReader.prototype.readAsBinaryString) {
            FileReader.prototype.readAsBinaryString = function(f) {
            var binary = "";
            var rABS = false; //是否将文件读取为二进制字符串
            var pt = this;
            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]);
                }
                if(rABS) {
                     wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
                          type: 'base64'
                     });         
                } else {
                     wb = XLSX.read(binary, {
                          type: 'binary'
                     });
                }
         
                // previwData就是你想要的东西 excel导入的数据        
                console.log(_this.previwData)
                _this.previwData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); 
                _this.dialogSupplierListVisible = true
                // console.log(outdata)
         
                 }
                 reader.readAsArrayBuffer(f);
             }
             if(rABS) {
                  reader.readAsArrayBuffer(f);
             } else {
                  reader.readAsBinaryString(f);
             }
        }