Vue processes the file stream returned by the backend, downloads it into an excel file, and the content displays object, object

Project scenario:

Today, I encountered a bug during joint debugging and development with the background.
It is a checked data that is exported to generate an excel file. The front end obtains the id of the checked data, composes parameters, requests the background, the background returns the file stream, the front end processes, and the browser automatically downloads it into an excel file.


Problem Description:

insert image description here

Blob is used, the front-end and back-end data joint debugging is successful, and the data return is also normal, but the downloaded excel file has no content when it is opened, and object, object is displayed.

solution:

axios({
    
    
     method: 'post',
     url:PramsUrl,
     data:preOrderNoIds,
     responseType:"arraybuffer"
}).then((res)=>{
    
    
      let url = window.URL.createObjectURL(new Blob([res.data], {
    
     type: '.xlsx' }));
      let a= document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.setAttribute('download', `${
      
      this.downloadName}.xlsx`);
       document.body.appendChild(a);
       a.click();
       url = window.URL.revokeObjectURL(url);
       document.body.removeChild(a)
}).catch(error => {
    
    
        this.$message.error('导出失败')
});

Guess you like

Origin blog.csdn.net/qq_36873710/article/details/123270166