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

axios How to intercept the get request and download the file

.

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,

String

, etc.

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

Javascript

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:

Send a request

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

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='';
 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

After that, we can download the file through the get request in 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:

How the vue project is released through Baidu's BAE

Detailed graphic explanation of highcharts introduced in vue

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!