vue excel 다운로드 - blob Download

---

✅ js blobDownload

공통 js 파일에 아래와 같은 bolbDownload 파일을 만든다.

 

export function blobDownload(response){
  // 1. blob URL 생성
  var contentTypeHeader = response.data.type;
  var blobURL = window.URL.createObjectURL(new Blob([response.data], { type: contentTypeHeader }))
  
  // 2. fileName response 헤더에서 불러오기
  var fileName = response.headers['content-disposition'].match(/filename="(.+)"/)[1]

  //인코딩 해서 온 파일 이름을 디코딩
  fileName =  decodeURIComponent(fileName)
  
  // 3. a Tag 사용 file name 지정
  var downloadLink = window.document.createElement('a');
  downloadLink.href = blobURL;
  downloadLink.download = fileName;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);

  //생성된 BlobURL 삭제
  window.URL.revokeObjectURL(blobURL);
}

---

✅ vue 에서 다운로드 실시

다운로드 버튼 클릭시 handleDownload 가 실행 되어 testExcelDownload 가 실행 된다.

 

import { blobDownload } from '@/utils/download'

/** 액셀 다운로드 **/
async handleDownload(){  
	await testExcelDownload( this.listQuery ).then(( res )=>{ 
		blobDownload(res) 
	}).catch((err)=>{
		console.log( 'selectTokenData : ' + err )
	})
}

---

✅ vue 에서 다운로드 실시

공통 js 파일에 아래와 같은 bolbDownload 파일을 만든다.

이때 내가 삽질한 부분은 responseType: 'blob' 부분인데 이 설정을 해주지 않았더니

excel 파일이 심하게 깨져서 다운로드 되었었다.

 

export function testExcelDownload(param){
    return request({
        url: '/api/test-data/excel',
        responseType: 'blob',
        method: 'get',
        params: { 
            seq  : param.seq  || 0,
            list : param.list || '',
            type : param.type || 0 
        }
    })
}

---