前端处理后端返回的文件流，进行文件下载-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端处理后端返回的文件流，进行文件下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

二进制流格式

前端处理后端返回的文件流，进行文件下载,javascript,前端,格式转换,vue.js

Blob格式

前端处理后端返回的文件流，进行文件下载,javascript,前端,格式转换,vue.js

前言：

需求：根据后端接口返回的文件流进行数据处理，并实现文件的下载，且下载文件为word文档.

封装下载文件接口：

前端处理后端返回的文件流，进行文件下载,javascript,前端,格式转换,vue.js

最开始没带responseType:"Blob",进行文件下载后，里面的内容全部是乱码！！！

代码实现：

//下载文件
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);
}

知识点补充：

1、new Blob(blobParts, options);

前端处理后端返回的文件流，进行文件下载,javascript,前端,格式转换,vue.js

type的常见类型：

扩展名	文件类型	MIME类型
.doc	Microsoft Word	application/msword
.docx	Microsoft Word	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.jpeg/.jpg	JPEG 图片	image/jpeg
.mp3	MP3 音频	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

查看更多：Media Types

2、格式转化

二进制流转blob

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

blob转base64

前端处理后端返回的文件流，进行文件下载,javascript,前端,格式转换,vue.js 文章来源地址https://www.toymoban.com/news/detail-724067.html

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

到了这里，关于前端处理后端返回的文件流，进行文件下载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！