The size of the blob download file is different from that of the original file.

using vue as the front end and node.js as the back end to develop a website, there is a requirement to download files at the front end, file types include pdf, word, exe, etc., and the file storage location is in the path of the back end.

backend code:

res.download(file_path)

Front end code:

axios.get(url,{responseType:"blob"}).then(function(res){
   if (res.data){
      filename = "filename";
      var blob = new Blob([res.data],{type:""});
      console.log("sizzze",res.data.length,blob.size);
      
      if (window.navigator.msSaveOrOpenBlob){
        navigator.msSaveOrBlob(blob, filename);
      }else{
        var link = document.createElement("a");
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        document.body.appendChild(link);
        var evt = document.createEvent("MouseEvents");
        evt.initEvent("click", false, false);
        link.dispatchEvent(evt);
 
        document.body.removeChild(link);
      }
  })

but the size of the downloaded file is different from that of the original file, and it is always larger than the original file. console.log ("sizzze",res.data.length,blob.size) use this sentence to observe the size of the data sent back by the backend and the data size of the generated blob, which is different.
lack of talent and learning, really do not understand, please help the gods to answer, thank you!


responseType has written that the res.data returned by blob is already blob. Did you lose another type in new?

Menu