Use axios to implement the download function through vue.js (detailed tutorial)

Below I will share with you an example of using vue.js to implement the download function using axios. It has a good reference value and I hope it will be helpful to everyone.

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 itaxios How to intercept the get request and download the file .

The reason why Ajax cannot download files

The browser's GET (frame, a) and POST (form) requests have the following characteristics:

The response will be processed by the browser

The response content can be binary files, strings, etc.

##Ajax requests have the following characteristics:

Axios intercepts the request and implements the download

Send a request

We can add an interceptor for 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

nodejs implements a super simple method to generate QR codes

nodejs mongodb aggregate cascade query operation example

Solve the problem that the DOM operation of the vue page does not take effect

The above is the detailed content of Use axios to implement the download function through vue.js (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!