axios를 사용하여 vue.js를 통해 다운로드 기능 구현(자세한 튜토리얼)

아래에서는 axios를 사용하여 다운로드 기능을 구현하기 위해 vue.js를 사용하는 예를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

이 글은 주로 Zhihu의 답변에서 나온 것입니다. 여기 빨간색 부분은 작지만 매우 유용한 코드입니다.

Axios가 요청을 가로채고 파일을 다운로드하는 방법 .

Ajax가 파일을 다운로드할 수 없는 이유

브라우저의 GET(프레임, a) 및 POST(양식) 요청은 다음과 같은 특징을 갖습니다.

응답은 브라우저에서 처리됩니다.

응답 내용은 다음과 같습니다.

Ajax 요청에는 다음과 같은 특징이 있습니다.

응답은 Javascript로 처리됩니다.

응답 콘텐츠는 문자열만 될 수 있습니다.

따라서 Ajax 자체는 다음의 다운로드 기능을 실행할 수 없습니다. 브라우저.

Axios는 요청을 가로채서 다운로드를 구현합니다

파일을 다운로드하기 위해 일반적으로 다음 단계를 사용합니다.

요청 보내기

응답 받기

응답을 사용하여 여부를 결정합니다. 반환값은 파일입니다

파일인 경우 페이지에 프레임을 삽입합니다

프레임을 사용하여 브라우저의 다운로드 받기를 구현합니다

axios에 인터셉터를 추가할 수 있습니다.

import axios from 'axios'
// download url
const downloadUrl = url => {
 let iframe = document.createElement('iframe')
 iframe.style.display = 'none'
 iframe.src = url
 iframe.onload = function () {
 document.body.removeChild(iframe)
 }
 document.body.appendChild(iframe)
}
// Add a response interceptor
axios.interceptors.response.use(c=> {
 // 处理excel文件
 if (res.headers && (res.headers['content-type'] === 'application/x-msdownload' || res.headers['content-type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) {
 downloadUrl(res.request.responseURL)
 
 <span style="color:#ff0000;"> res.data=&#39;&#39;;
 res.headers[&#39;content-type&#39;] = &#39;text/json&#39;
 return res;</span>
 }
 ...
 return res;
}, error => {
 <span style="color:#ff0000;">// Do something with response error
 return Promise.reject(error.response.data || error.message)</span>
})
export default axios

그 후에 다음을 수행할 수 있습니다. axios의 get 요청을 통해 파일을 다운로드합니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

nodejs는 QR 코드를 생성하는 매우 간단한 방법을 구현합니다

nodejs+mongodb 집계 계단식 쿼리 작업 예

Vue 페이지 DOM 작업이 적용되지 않는 문제 해결

위 내용은 axios를 사용하여 vue.js를 통해 다운로드 기능 구현(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!