Axios uses blob to implement file browser download method in vue

vue axios uses blob to realize file browser download

In vue, using axios to request data from the background, but only receiving the returned response cannot achieve browser download, so it is necessary to use blob to implement browser downloads. It is divided into two situations: one is get request, use params, and the other is post request. The parameters are passed using formdata.

Scenario 1: Get request, params parameter transmission

URL and parameter part code:

('/api/downloadConfig', {
   params:{oid:oid},
   responseType:'blob',
 })

blob specific download implementation code

 if( === 200){
  const content = ;
  const blob = new Blob([content]);
  if('download' in ('a')){
    //Not IE download    const a = ('a');
     = fileName;
     = 'none';
     = (blob);
    (a);
    ();
    ();
    (a);
  }else{
    //IE10+ download    if(typeof  !== 'undefined'){
      (blob, _this.selected);
    }else{
      let URL =  || ;
      let downloadUrl = (blob);
       = downloadUrl;
  }
 }

Scenario 2: Post request, formdata parameter transmission

URL and parameter part code:

('/api/downloadConfig', form, {responseType:'blob'})

The specific download implementation code of blob is consistent with the above get request

vue axios implementation download files and responseType:blob precautions

Need to use axios and js-file-download components

npm install js-file-download --save
npm install axios --save

import fileDownload from 'fileDownload'; // Introduce fileDownloadimport axios from 'axios'; // Introduce axios 
axios({
    method: 'get',
    url: 'xxxxxxx',
    responseType: 'blob'
}).then(res => {
    if( == 200){
      // ['content-disposition'].substring(20) means to get the file name from the response header      fileDownload(,['content-disposition'].substring(20));
    }else { // Download the file failed, parsing json format information      let that = this;
      var fileReader = new FileReader();
      (); // Read the file content by bytes, and the result is a binary string of the file       = ()=>{
          that.$();
      }
    } 
})

Notes:

responseType:blob means that the response type returned by the server is a binary stream, which is generally used in file and video download scenarios.

Under normal circumstances, the backend returns binary data. When the backend server errors, it often returns error messages in json form, such as {"code":500,"msg":"Unknown exception"}.

Because the blob type is set, axios will force the data to blob, resulting in the json format response that cannot be parsed normally. It needs to be processed using the FileReader object. FileReader is a mechanism for asynchronous reading of files.

FileReader provides the following methods, everyone can choose according to their needs.

• readAsArrayBuffer(file): Read file content by bytes, and the result is represented by an ArrayBuffer object
• readAsBinaryString(file): Read the file content by bytes, and the result is a binary string of the file
• readAsDataURL(file): Read the file content, and the result is expressed in the string form of data:url
• readAsText(file,encoding): Read the file content by characters, and the result is expressed in a string

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.