Problems encountered when setting responseType to blob for front-end file export

1. When our front end calls the export file interface, in general, the responseType will be added to the request as blob

 

I encountered a problem a few days ago, the interface of the back-end personnel will appear in two situations:

1. When the export interface request is normal, our front end will receive a file stream as shown in the figure below

 At this time, we print the data type returned by the interface, and find that the interface will return a blob type of data, and the attribute type in the blob is application/vnd.ms-excel, which means that the file type we exported is in excel format. As shown below 

BLOB (binary large object)----Binary large object is a container that can store binary files.

To put it bluntly, a blob is a binary object. We can directly read the file content through this blob object, but at this time, we only need to export the corresponding blob object directly with the a tag, as shown in the figure below:

 2. When the export interface data is too much, the backend throws an exception, as shown in the figure below 

At this time, we print out the result on the browser console, the cashback result is still a blob object, but the type becomes application/json 

We want to get the result returned by the interface, we need to read the file of the blob object, we need to useFileReader

FileReader The object allows a web application to asynchronously read the contents of a file (or raw data buffer) stored on the user's computer, using the  File  or  Blob  object to specify the file or data to be read.

We can judge according to the type attribute of the blob object. When the type is application/json, the interface returns a json object

Among them, reader.result is the result returned by the interface, which is a json string that needs to be converted into an object. 

Guess you like

Origin blog.csdn.net/weixin_46018417/article/details/129026708