How to use axios to implement download function in vue.js

This time I will show you how to use axios to implement the download function in vue.js, and what are the things to note when using axios to implement the download function in vue.js. The following is a practical case, let’s take a look together. take a look. This article mainly comes from an answer on Zhihu. The red part here has been processed by myself. Although it is small, it is a very useful code.

I have to answer it

.

The reason why Ajax cannot download filesThe browser's GET (frame, a) and POST (form) requests have the following characteristics:

The response will be handed over to the browser for processing

The response content can be a binary file,

, etc.

Ajax request has the following Features: response will be handed over to

for processing response content can only be a string

Therefore, Ajax itself cannot Trigger the browser's download function.

Axios intercepts the request and implements the downloadIn order to download the file, we usually use the following steps:

Get the response

Use the response to determine whether the return is a file

If it is a file, insert a frame into the page

Use frame to achieve Browser's get download

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of How to use axios to implement download function in vue.js. For more information, please follow other related articles on the PHP Chinese website!