다운로드 관련 JAVASCRIPT

이미지 다운받고 미리보기

responseType을 ‘blob’으로 API를 호출하여야 하며, 서버에 있던 이미지를 화면으로 미리보기를 위해 가상 url을 생성하는 window.URL.createObjectURL 정적 메서드를 사용.

axios.post(url, body, {
  headers   : {
    "Content-Type" : "application/json;charset=UTF-8",
    "Accept" : "application/json",
    "Access-Control-Allow-Origin" : "*",
    "X-AUTH-TOKEN": XXXXXXX,
    "X-MENU-ID" : "",
    "X-CLNT-IP" : "",
  },
  timeout: 600000, // 10분
  responseType : 'blob',
}).then(res=>{
  let blob = new Blob([res.data], { type:"image/png"});
  console.log(window.URL.createObjectURL(blob));
});

문서파일 다운로드

가상 Achor 태그를 생성하여 해당파일을 수동 클릭하여 다운로드 함.

fileDownload(blob, fileName){ //fileName은 원하는 파일명을 string 타입으로 작성함
  const link = document.createElement('a');
  
  if (window.navigator.msSaveOrOpenBlob) { // IE blob Download
    link.onclick = function () {
      window.navigator.msSaveOrOpenBlob(blob, fileName);
    };
  } else {
    link.href = window.URL.createObjectURL(blob);
    link.download = fileName;
  }
  link.click();
}

서버에 있는 파일을 접근하여 다운로드(녹취파일 재생)

let fileNmArr = rcodFileNm.split('/');
let fileNm = encodeURIComponent(fileNmArr[fileNmArr.length-1]);
fileNmArr[fileNmArr.length-1] = fileNm;

let path = fileNmArr.join('/');
this.nowPlayPath = '[서버 도메인]/upload/rcod' + path;

let audioObj = document.querySelector('#player');
audioObj.load();
audioObj.addEventListener('canplay', ()=>{
    this.isLoad = false;
    audioObj.play();
});

<audio class="player" id="player" controls ref="player">
    <source id="source" ref="source" type="audio/mp3" :src="nowPlayPath">
    Your browser does not support the <code>audio</code> element.
</audio>

[참고] URI 전체를 인코딩 할때는 encodeURI()를 사용하고 URI 파라메터를 인코딩 할때는 encodeURIComponent()를 사용하면 된다.

• encodeURI는 알파벳, 0~9의 숫자, ; , / ? : @ & = + $ # - _ . ! ~ * ‘ ( ) 를 제외한 문자를 인코딩(이스케이프 처리)
• encodeURIComponent는 알파벳,0~9의 숫자 - _ . ! ~ * ‘ ( ) 를 제외한 문자를 이스케이프 처리