vue excel匯入匯出

?倩倩彭醬發表於2019-03-07
VueExcel

Excel匯出

依賴js-xlsx實現的

  • 首先需要下載3個依賴包
npm install xlsx file-saver -S

npm install script-loader -S -D複製程式碼
  • 在src目錄下新建vendor資料夾，引入Blob.js和Export2Excel.js

vue excel匯入匯出

  • 可以happy的匯出啦
  1. 匯出

    fileDown() {
    //引入檔案　　　　　	
    import('../../../vendor/Export2Excel.js').then(excel => {
    const tHeader = ['資料元分類', '中文名稱', '英文名稱', '程式碼', '版本號', '釋出日期'] //頭部轉換中文
    const filterVal = ['eltTypeValue', 'eltName', 'eltNameE', 'eltCode', 'eltVersion', 'createDate'] const list = this.dialogTabDataSel const data = this.formatJson(filterVal, list) excel.export_json_to_excel({
        header: tHeader,
        //匯出頭
        data,
        //匯出資料
        filename: '資料元' //檔名
    })
})
},
formatJson(filterVal, jsonData) {
    return jsonData.map(v = >filterVal.map(j = >v[j]))
},

複製程式碼

  2. 匯入

用了element-ui的Upload 上傳元件，需介面校驗上傳的excle檔案資料格式是否正確

<el-upload
  ref="upfile"
 :before-upload="beforeUpload"
  action=""
  accept=".xlsx, .xls"
  list-type="text"
 :on-remove="handleRemove"
 :limit="1"
 :on-exceed="handleExceed"
 :http-request="onSuccess">
  <el-button size="small" type="primary">選擇</el-button>
</el-upload>複製程式碼

onSuccess(content){
        const fd = new FormData();
        fd.append('file', content.file)
        importElement(fd).then(response => {
          if(response.status == 'SUCCESS'){
	      this.$message({
 		message: '上傳成功！',
 		type: 'success',
	     });
	this.fileImport = false;
	//清除檔案
	this.handleRemove()
	}else if(response.status == '500'){
		this.$message.error('伺服器異常');
	}else{
		this.$message.error(response.msg);
						
	}
       })
			
},         複製程式碼

專案要求 需要匯出錯誤資料、以及錯誤原因，一開始介面把這個兩種資料分開，我當時想到時分成兩個工作簿，於是去度娘那逛了一圈，找了大佬程式碼改了改

export
function downloadExl(josnlist, type) {
    var json = JSON.parse(JSON.stringify(josnlist[0]));
    var templist = [];
    for (var i in josnlist) {
        var json = JSON.parse(JSON.stringify(josnlist[i]));
        var tmpdata = json[0];
        json.unshift({});
        var keyMap = []; //獲取keys
        for (var k in tmpdata) {
            keyMap.push(k);
            json[0][k] = k;
        }
        var tmpdata = []; //用來儲存轉換好的json 
        json.map((v, i) = >keyMap.map((k, j) = >Object.assign({},
        {
            v: v[k],
            position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
        }))).reduce((prev, next) = >prev.concat(next)).forEach((v, i) = >tmpdata[v.position] = {
            v: v.v
        });
        templist.push(tmpdata)
    }
    var outputPos0 = Object.keys(templist[0]); //設定區域,比如表格從A1到D10
    var outputPos1 = Object.keys(templist[1]); //設定區域,比如表格從A1到D10
    var tmpWB = {
        SheetNames: ['errorMsg', 'errorList'],
        //儲存的表標題
        Sheets: {
            'errorMsg': Object.assign({},
                templist[0], //錯誤資訊描述
                {
                    '!ref': outputPos0[0] + ':' + outputPos0[outputPos0.length - 1] //設定填充區域
                }),
            'errorList': Object.assign({},
                templist[1], //錯誤資訊內容
                {
                    '!ref': outputPos1[0] + ':' + outputPos1[outputPos1.length - 1] //設定填充區域
                }),

        }
    };
    var wbout = XLSX.write(tmpWB, {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary'
    });
    var fileName = "問題資料" + newdate() + ".xlsx";
    saveAs(new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }), fileName)
}
複製程式碼


相關文章