vue 에서 axios 를 사용 하여 post 방식 으로 바 이 너 리 스 트림 다운로드 파일 가 져 오기(인 스 턴 스 코드)

수요
다운로드 표 에 대응 하 는 엑셀 파일 내 보 내 기 를 누 르 십시오.
vue 프로젝트 에서 사용 하 는 axios,배경 자바 가 제공 하 는 post 인터페이스 api
이루어지다
첫 번 째 단 계 는 axios 요청 에 파 라 메 터 를 추가 하여 받 은 데 이 터 를 바 이 너 리 파일 흐름 으로 표시 합 니 다.responseType: 'blob'두 번 째 단 계 는 데이터 흐름 을 가 져 온 후에 지정 한 파일 형식 으로 흐름 을 바 꾸 고 a 탭 을 만 들 며 다운 로드 를 모 의 클릭 하여 파일 다운로드 기능 을 실현 합 니 다.

let blob = res.data
let reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = (e) => {
 let a = document.createElement('a')
 a.download = fileName
 a.href = e.target.result
 document.body.appendChild(a)
 a.click()
 document.body.removeChild(a)
}

문제.
axios 를 사용 하면 자바 백 엔 드 에서 제 시 된 Content-Disposition 의 파일 이름 을 가 져 올 수 없습니다.
주의해 야 할 것 은 브 라 우 저 에서 header 에 정보 가 있 지만 axios 의 res.header 를 통 해 얻 을 수 없습니다.
 
이 경우 백 엔 드 설정 헤더 가 필요 합 니 다.
Access-Control-Expose-Headers: Content-Disposition
백 엔 드 가 추 가 된 후에 도 가 져 오지 못 할 수도 있 습 니 다.백 엔 드 에 fileName 필드 를 따로 추가 하면 됩 니 다.

response.setContentType("multipart/form-data");
response.setCharacterEncoding("utf-8");
response.setHeader("Content-disposition", "attachment;filename=" + UUID.randomUUID().toString() + ".xlsx");
response.setHeader("FileName", UUID.randomUUID().toString() + ".xlsx");
response.setHeader("Access-Control-Expose-Headers", "FileName")

총결산
완전한 axios 코드

axios.post({
 url:`url`,
 method:`post`,
 responseType: 'blob'
}).then(res => {
 let blob = res.data
 let reader = new FileReader()
 reader.readAsDataURL(blob)
 reader.onload = (e) => {
  let a = document.createElement('a')
  a.download = `fileName.xlsx`
  a.href = e.target.result
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
 }
})

ps:vue-axios 의 사용 방법(간단 하고 알 기 쉽다)
1.vue-axios 플러그 인의 설치
npm 사용:$ cnpm install axios2.main.js 에 추가(원형 체인 에 추가)

import axios from 'axios';
Vue.prototype.axios = axios;

일 을 마치 면 모든 구성 요소 에서 마음대로 사용 할 수 있 습 니 다.예!^-^!
예:

this.axios.post('http://ai.yiche.com/web/ability/nlu/standardTokenizer', {
     "text": "                        ，     ~"
    }).then(function(res) {
     console.log(res.data);
    }).catch(function(err) {
     if (err.response) {
      console.log(err.response)
     }
    });

위 에서 말 한 것 은 소 편 이 소개 한 vue 에서 axios 를 사용 하여 post 방식 으로 바 이 너 리 스 트림 다운로드 파일 을 가 져 오 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!