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

Vue 엑셀 다운로드 기능

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

아래와 같이 구성하였다

//엑셀 파일 다운로드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

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 송수신부

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

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);             }         })     } }

//요청부

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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');         });     } }