• Projects often encounter the need to export list content or download files. Combined with various situations, I summarized the three most commonly used methods at the front end to accept and download the file stream transmitted from the back end. Different methods can be used for different situations.

First, the back end converts the file into a byte array

/**
     * Convert file to byte array
     * @param filePath  File class through new file (file path)
     * @return byte array
     */
    public static byte[] File2byte(File filePath) {
        byte[] buffer = null;
        try {
            FileInputStream fis = new FileInputStream(filePath);
            ByteArrayOutputStream bos = new ByteArrayOutputStream();
            byte[] b = new byte[1024];
            int n;
            while ((n = fis.read(b)) != -1) {
                bos.write(b, 0, n);
            }
            fis.close();
            bos.close();
            buffer = bos.toByteArray();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return buffer;
    }

Here, you can also base64 encode and decode byte s

byte[] bytes = tradeFile(file);
String str = new String(Base64.encodeBase64(bytes))
byte[] bytes = Base64.decodeBase64(str);

The latter is the focus. The front end accepts the back-end file stream and downloads several methods

Method 1
Usage scenario
get request for backend

Concrete implementation

<a href="Back end file download interface address" >Download File</a>

Directly use a tag to accept the back-end file stream

Method 2
Usage scenario
The post request for the backend is implemented using the native XMLHttpRequest method

Concrete implementation

function request () {
    const req = new XMLHttpRequest();
    req.open('POST', '<Interface address>', true);
    req.responseType = 'blob';
    req.setRequestHeader('Content-Type', 'application/json');
    req.onload = function() {
      const data = req.response;
      const blob = new Blob([data]);
      const blobUrl = window.URL.createObjectURL(blob);
      download(blobUrl) ;
    };
    req.send('<Request parameters: json character string>');
  };

function download(blobUrl) {
  const a = document.createElement('a');
  a.download = '<file name>';
  a.href = blobUrl;
  a.click();
}

request();

Method 3
Usage scenario
The post request for the backend is implemented using the native fetch method

Concrete implementation

function request() {
  fetch('<Interface address>', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: '<Request parameters: json character string>',
  })
    .then(res => res.blob())
    .then(data => {
      let blobUrl = window.URL.createObjectURL(data);
      download(blobUrl);
    });
}

function download(blobUrl) {
  const a = document.createElement('a');
  a.download = '<file name>';
  a.href = blobUrl;
  a.click();
}

request();

summary

• If the download interface provided by the backend is of get type, you can directly use method 1, which is simple and convenient; Of course, if you want to use methods 2 and 3, it's OK, but I feel a little short-sighted.
  If the download interface provided by the back-end is of type post, you must use method 2 or method 3.

How to choose between method 2 and method 3?

• When all the interface requests in your project are implemented based on XMLHttpRequest, method 2 is more suitable, as long as it is extended based on the interface request tool class in your original project.
  When all the interface requests in your project are implemented based on fetch, method 3 is more suitable. For example, a project I am working on is based on ant design
  pro's background management system, the request class in it is based on fetch, so I will directly use method 3, as long as it is slightly modified in its request.js file.
  I'm talking about two native request methods here. If your project references a third-party request package to send requests, such as axios, it's another matter.

Author: I have a bubble in my mouth
Link: https://juejin.cn/post/6844903740995010568
Source: rare earth Nuggets