The front end processes the file stream returned by the back end and downloads the file.

binary stream format

 Blob format

Foreword:

        Requirements: Perform data processing based on the file stream returned by the back-end interface, and implement file download, and the downloaded file is a word document.

Package download file interface:

At first, responseType: "Blob" was not included . After downloading the file, all the contents were garbled! ! !

Code:

//下载文件
async function DownLoadFile(row) {
  let res = await DownLoadFileAPI(row.id);
  const blobURL = window.URL.createObjectURL( 
    new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" })
  );
  const tempLink = document.createElement("a");
  (tempLink.style.display = "none"), (tempLink.href = blobURL);
  tempLink.setAttribute("download", row.filename);
  document.body.appendChild(tempLink);
  tempLink.click();
  document.body.removeChild(tempLink);
  window.URL.revokeObjectURL(blobURL);
}

 Additional knowledge points:

        1、new Blob(blobParts, options);

         Common types of type :

extension name	file type	MIME type
.doc	Microsoft Word	application/msword
.docx	Microsoft Word	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.jpeg/.jpg	JPEG pictures	image/jpeg
.mp3	MP3 audio	audio/mpeg
.pdf	PDF	application/pdf
.xls	Microsoft Excel	application/vnd.ms-excel
.xlsx	Microsoft Excel	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.zip	ZIP	application/zip

           See more: Media Types

       2. Format conversion

        Binary transfer blob

const blob = new Blob([BufferSource],{type:type})

       blob to base64

BlobToBase64(blob,cb){
    const fileReader = new FileReader()
    fileReader.onload = function(e){
        cb(e.target.result)
    }
    fileReader.readAsDataURL(blob)
}