How to download vue using file stream (new Blob)

vue uses file streams for download (new blob)

Packaging method

function getExel(url, params, index) {+
  return new Promise(function(resolve, reject) {
    let data = {
      method: "GET",
      url:url,
      headers: {
        'token':  gettoken("token")
      },
      responseType: 'arraybuffer'
    }
    resolve(axios(data));
  })
}

Note: responseType should be set to: 'arraybuffer'

Send a request ($Api is already mounted on the vue object, so it can be used like this)

this.$("/goodsCheckService/v1/planMaterial/export?idList="+idArray)
          .then(response =&gt; {
              let a = ('a');
 
              //ArrayBuffer to Blob              let blob = new Blob([], {type: "application/-excel"}); 
              
              let objectUrl = (blob);
              ("href",objectUrl);
              ("download", 'Planning Spreadsheet.xls');
              ();
});

Vue download file stream complete front and backend code

When using Vue, how does our front-end handle the file stream returned by the back-end

First, the backend returns to the stream. Here I took out the flow action. I need to use it in many places.

    /**
 * Download single file
      *
 * @param docId
 */
    @GetMapping("/download/{docId}")
    public void download(@PathVariable("docId") String docId,
                         HttpServletResponse response) {
        outWrite(response, docId);
    }
    
    /**
 * Output file stream
 * @param response
 * @param docId
 */
    private void outWrite(HttpServletResponse response, String docId) {
        ServletOutputStream out = null;
        try {
            out = ();
            // Image cache is prohibited.            ("Pragma", "no-cache");
            ("Cache-Control", "no-cache");
            ("Expires", 0);
            byte[] bytes = (docId);
            if (bytes != null) {
                MagicMatch match = (bytes);
                String mimeType = ();
                (mimeType);
                ("Content-Length", ());
                (bytes);
            }
            ();
        } catch (Exception e) {
            (e);
        } finally {
            (out);
        }
    }

I have introduced a component in front-end js-file-download

npm install js-file-download --save

Then add it in the Vue file

import fileDownload from "js-file-download";
   // The corresponding events of the document operation column    async handleCommand(item, data) {
      switch () {
        case "download":
          var res = await (data);
          return fileDownload(res, );
        ...
        default:
      }
      // Refresh the list of current levels      const folder = ();
      (, );
    },
    // download    async download(row) {
      if (()) {
        return ();
      } else {
        return ();
      }
    },

docAPI js Note that responseType needs to be set

/**
 * Download a single file
 * @param {*} id
 */
const download = (id) =&gt; {
  return request({
    url: _DataAPI.download + id,
    method: "GET",
    responseType: 'blob'
  });
};

This will be successfully downloaded

The above is personal experience. I hope you can give you a reference and I hope you can support me more.