Javascript 프런트엔드 다운로드 백그라운드에서 전송되는 파일 흐름 코드 실례

프론트 데스크 요청 데이터:

url: '/app/downloadApp',
 method: 'get',
 responseType: 'blob',
 params: data

수신 매개변수 형식을 responseType: "blob"으로 설정합니다.

downloadFile(res, fileName) {
   if (!res) {
    return
   }
   if (window.navigator.msSaveBlob) { // IE IE 
    try {
     window.navigator.msSaveBlob(res, fileName) // res ， ， var data = new Blob([res.data])  ,fileName 
     // window.navigator.msSaveOrOpenBlob(res, fileName); // ， 
    } catch (e) {
     console.log(e)
    }
   } else {
    let url = window.URL.createObjectURL(new Blob([res]))
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', fileName)//  
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link) //  
    window.URL.revokeObjectURL(url) //  blob 
   }
 },
 download(){
   var data = {
    appId:this.appId
   }
   downloadAppAjax(data).then(res => {
     const filename = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
     console.log(filename)
     this.downloadFile(res.data,filename)
   })
  }

여기의 다운로드 AppAjax는 백엔드 인터페이스를 호출하여 데이터를 요청하고 백엔드에서 되돌아오는 데이터는 파일 이름이 없습니다. 마지막으로header Content-Disposition 속성에서attachment를 발견합니다.filename=app.jpg
그래서 우리가 다운로드를 통해 자동으로 이름을 바꾸려면 filename을 꺼내야 한다. 여기서 decodeURI를 사용하여 Content-Disposition 속성 값을 디코딩하여 filename을 얻는다.decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);파일 흐름과 파일 이름을 가져와서 파일 흐름을 수신하고 주소를 만듭니다.let url =window.URL.createObjectURL(new Blob([res]))이어서 a 라벨을 이용하여 다운로드하면 된다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.