[Vue] 엑셀 다운로드 기능(Excel File DownLoad)

Vue 엑셀 다운로드 기능

요청부에서 HTTP 송수신을 호출하고 다시 그안에서 엑셀 파일이 다운로드 되겠금

아래와 같이 구성하였다

//엑셀 파일 다운로드

import util from './util.js'

/** 날짜 YYYYMMDD 형식으로 변환 */
Date.prototype.yyyymmdd = function() {
    var yyyy = this.getFullYear().toString();
    var mm = (this.getMonth() + 1).toString();
    var dd = this.getDate().toString();

    return yyyy + (mm[1] ? mm : '0'+mm[0]) + (dd[1] ? dd : '0'+dd[0]);
}

export default {
    /** 
     * 엑셀 파일 다운로드 기능 
     * 응답 받은 데이터를 파일로 변환시켜 다운 받을 수 있도록 한다
     **/
    getExcelFile(response, fileName) {
        let result = document.createElement('a');

        console.log((new Date()).yyyymmdd());

        let blob = new Blob([response.data], {type: response.headers['content-type']})

        //파일이름이 없을 경우 기본 파일이름을 셋팅한다 
        // 기본 파일이름 : export_yyyymmdd.xlsx
        fileName = util.isNull(fileName) ? 'export' : fileName;
        fileName = fileName+'_'+(new Date()).yyyymmdd()+'.xlsx';

        //this.fileCheck(fileName);

        let link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.target = '_self';
        link.download = fileName;
        link.click();
    }
}

//HTTP 송수신부

export default {
        /** 
	 * 엑셀다운로드 기능
	 * 
	 * [HEADER 지정]
	 * 기존 전문 요청 형식과 똑같고 추가로 HEADER에 컬럼 헤더 제목을 지정한다
	 * 지정하지 않으면 기본으로 컬럼 키값으로 셋팅 된다
	 * 
	 * [파일이름 지정]
	 * fileName 설정하려면 fileName에 원하는 파일이름을 담아서 넘긴다
	 * 
	 * [요청방법]
	 * EXCEL 다운로드할 전문 및 프로시저를 생성하고 
	 * VALUE에 조회조건을 셋팅해 엑셀 다운로드를 요청한다
	 * 아래의 예시와 같이 호출하는 곳에서 param을 셋팅해서 요청 하면된다
	 * 
	 * ex)
	 * var param = {
			REQ_TYPE:"203"
			, REQ_NUM:'AW03_05_V01'
			, VALUE:"│" //조회 조건
			// 엑셀 헤더 String 배열로 입력된 그대로 헤더를 만든다
			// 헤더를 지정하지 않으면 기본 컬럼 키 값으로 헤더를 만든다
			, HEADER: ["템플릿_코드","템플릿_구분","템플릿_구분 값","템플릿_제목","템플릿_내용","버튼_정보 (버튼명)","입력_일시","승인_상태","승인_상태 값","반려 메세지"]
		}
	 * 
	 */
	sendExcelDown: function(vue, param, suc, fail) {
		common.IS_LOADING = true;

		//공통 파라메터 적용 셋팅
		this.commonParam(param);

		let URI = common.BASE_URL + "excelDownApi";
		
		axios.post(
			`${URI}`
			, param
			,{responseType: 'arraybuffer'}
		)
		.then((ret) => {
				common.IS_LOADING = false;
				//파일 이름 지정 지정하지 않으면 export_yyyymmdd.xlsx 가 기본값이 된다
				var filename = '';
				fileUtil.getExcelFile(ret, filename);
			}
		)
		.catch(e => {
			common.IS_LOADING = false;
			
			if (fail != undefined) {
				fail(vue, e);
			}
		})
	}
}

//요청부

methods: {
	excelDown: function() { //전문 데이터 전송
		var param = {
				REQ_TYPE:"203"
			, REQ_NUM:'AW03_05_V01'
			, VALUE:"│" //조회 조건
			// 엑셀 헤더 String 배열로 입력된 그대로 헤더를 만든다
			// 헤더를 지정하지 않으면 기본 컬럼 키 값으로 헤더를 만든다
			, HEADER: ["템플릿_코드","템플릿_구분","템플릿_구분 값","템플릿_제목","템플릿_내용","버튼_정보 (버튼명)","입력_일시","승인_상태","승인_상태 값","반려 메세지"]
		}

		// 통신 호출
		httpCommon.sendExcelDown(this, param, function suc(vue, data) {
			//console.log('test complete');
		});
	}
}