vue to Download File Stream Complete Front and Back End Code

How does our front end handle the file stream returned by our back end when using Vue

First of all, the backend returns to the flow. Here I take out the action of the flow. I need to use it in many places

/**
 *  Download a 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 = response.getOutputStream();
   //  Disable image caching. 
   response.setHeader("Pragma", "no-cache");
   response.setHeader("Cache-Control", "no-cache");
   response.setDateHeader("Expires", 0);
   byte[] bytes = docService.downloadFileSingle(docId);
   if (bytes != null) {
    MagicMatch match = Magic.getMagicMatch(bytes);
    String mimeType = match.getMimeType();
    response.setContentType(mimeType);
    out.write(bytes);
   }
   out.flush();
  } catch (Exception e) {
   UnitedLogger.error(e);
  } finally {
   IOUtils.closeQuietly(out);
  }
 }

Front end Here I introduced a component js-file-download

npm install js-file-download --save

Then add it in the Vue file

import fileDownload from "js-file-download";

 //  Document Action Column Corresponding Events 
 async handleCommand(item, data) {
  switch (item.key) {
  case "download":
   var res = await this.download(data);
   return fileDownload(res, data.name);
  ...
  default:
  }
  //  Refresh the list of the current level 
  const folder = this.getLastFolderPath();
  this.listClick(folder.folderId, folder.name);
 },
 //  Download 
 async download(row) {
  if (this.isFolder(row.type)) {
  return FolderAPI.download(row.id);
  } else {
  return DocAPI.download(row.id);
  }
 },

docAPI js Note that responseType needs to be set

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

You can download it successfully.

For the learning tutorial of vue. js, please click on the special vue. js component learning tutorial and Vue. js front-end component learning tutorial to learn.