axios를 사용하여 vue.js에서 다운로드 기능을 구현하는 방법

이번에는 vue.js에서 다운로드 기능을 구현하기 위해 axios를 사용하는 방법을 보여드리겠습니다. vue.js에서 다운로드 기능을 구현하기 위해 axios를 사용할 때 notes는 무엇입니까? 바라보다.

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

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

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

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

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

응답 콘텐츠는 바이너리 파일,

String 등

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='';
 res.headers['content-type'] = 'text/json'
 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 요청을 통해 파일을 다운로드합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Baidu의 BAE를 통해 vue 프로젝트를 게시하는 방법

vue에 하이차트 도입에 대한 자세한 그래픽 설명

위 내용은 axios를 사용하여 vue.js에서 다운로드 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!