Vue file Export (Excel)

utils/request.js
post: function (url, data,responseType) {
    return new Promise((resolve, reject) = > {
      axios.post(url, data,{responseType}).then(response= > {
        resolve(response)
      }).catch(error= > {
        reject(error)
      })
    })
}


api/index.js
export const recordExport = (data) = > {
  return request.post(`${apiYJH}api/applyRecord/recordExport`, data,'arraybuffer'} recordExport({ids:this.selectionIds
  }).then(res= >{
      console.log(1111,res);
      var blob = new Blob([res.data || res],{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; charset=utf-8'})
      var downloadElement = document.createElement('a');
      var href = window.URL.createObjectURL(blob); // Create a download link
      downloadElement.href = href;
      downloadElement.download = 'Export XLSL data.xlsx'; // Download the file name
      document.body.appendChild(downloadElement);
      downloadElement.click(); // Click download
      document.body.removeChild(downloadElement); // Remove the element after downloading
      window.URL.revokeObjectURL(href); // Release the blob object
      
      
         /* Let url= arrayBufferToBase64(res); // ArrayBuffer document.getelementById ('img').src='data:image/jpeg; base64,'+url; * /
      
  }).catch(err= >{
    console.log(err ,'[[[')})Copy the code

• Possible problems: The global interceptor returned by the request is intercepted, so the returned content can be judged for processing

  axios.interceptors.response.use((res) = > {
     if (res.data.code == 200 || res.data.status_code == 200) {
         return Promise.resolve(res.data)
     } else if(res.data.code == 401) {... }else {
         // When the object Blob is returned as a stream file
         if(res.status ==200 && Object.prototype.toString.call(res.data) == '[object Blob]'| | &&Object.prototype.toString.call(res.data) == '[object ArrayBuffer]') {// Solve the problem that html2Canvas will not be able to download the external link. Solve the problem that the background direct return stream will be intercepted by the return interceptor
             return Promise.resolve(res.data)
         }
         Message.error(res.data.status_desc || 'Error');
         return Promise.reject(res.data); }},(err) = > {
         // tryHideFullScreenLoading();
         // Message({ message: err.message, type: 'error' })
         return Promise.reject(err)
  })
  
  Copy the code