美文网首页
vue excel表格导入导出

vue excel表格导入导出

作者: 辣子_ | 来源:发表于2020-10-21 18:38 被阅读0次

    导入,导出功能:
    安装依赖:
    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);
                 }
            }
    

    相关文章

      网友评论

          本文标题:vue excel表格导入导出

          本文链接:https://www.haomeiwen.com/subject/vomemktx.html