Never place your hopes on your future self, who is under more pressure than you are now.

Many times we will encounter the need to implement the export function and export the report according to the user’s choice.

Yes, I also encountered, when you have a conscience back end, it will choose to return a download address, and then the front end can download the file by accessing the address, simple, quick and convenient; Or return a file ID, through the fixed download interface to download the file, is also very close to the people understand.

Unfortunately, today my backend selection returned me a stream of files like this ↓

When this happens, the front-end player has to transfer the files to Excel files and then download them.

Methods a

First of all, when we write the request, we need to restrict the response type,

  • ResponseType: “blob” in the request configuration;

  • Gets the file stream of the response

  • Use the Blob constructor to create a new Blob object and pass in the file stream object and file type (Excel in this case).

  • With Windows. URL. CreateObjectURL object to create a new URL, document: URL. CreateObjectURL ();

  • download

/ / get request
axios
    .get(
        'background to the URL', 
        { 
            params: Request parameters,responseType: "blob"  // Add the response type
        })
    .then(res= > {
        let { data } = res; // Get the file stream
        let blobObj = new Blob([data], { type: "application/vnd.ms-excel" }); // Create a Blob object
        let url = window.URL.createObjectURL(blobObj); // Create a URL object
       window.location.href = url;
    });
};

// The same goes for post requests
axios
    .post(
        'background to the URL', body argument, {params: URL parameter,responseType: "blob" 
        })
    .then(res= > {
       window.location.href = window.URL.createObjectURL(new Blob([res.data], { type: "application/vnd.ms-excel" }));
    });
};
Copy the code

The Excel file name downloaded is the URL of the Blob object, which cannot be fixed.

Method 2

This method cleverly uses the A tag to download files, which can be used to limit the file name, but remember to clear the a created after each use. , no more words, direct post code.

/ / get request
axios
    .get(
        'background to the URL', 
        { 
            params: Request parameters,responseType: "blob"  // Add the response type
        })
    .then(res= > {
        let { data } = res; // Get the file stream
        let blobObj = new Blob([data], { type: "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); // Create a Blob object
        let url = window.URL.createObjectURL(blobObj); // Create a URL object
        let downloadLink = document.createElement('a'); // Create the a element
        downloadLink.style.display = 'none'; // Hide the link
        downloadLink.download('xyz report.xls');
        downloadLink.href = url; // Add the download address
        document.body.appendChild("downloadLink"); // Add the a element
        downloadLink.click(); // Click download
        document.body.removeChild("downloadLink"); // Remove element A
    });
};
Copy the code

The same goes for post requests in the second method, which I won’t go into here

Note: Due toaThe download TAB has the same origin policy, if different sources, will fail to download