记录一次前端文件下载遇到的坑

是路宝哦

已于 2022-07-27 10:25:35 修改

阅读量1.1k

点赞数

文章标签：前端 javascript

于 2022-07-27 10:23:24 首次发布

本文链接：https://blog.csdn.net/teng_zz/article/details/126008937

版权

我心想，不就是一个文件下载嘛，后端返回给我一个文件流，我前端转换成blob对象然后下载不就完事了，但是万万没有想到，会遇到这么多波折。。。

后端返回给我的是一个不完整的base64编码的字符串，我直接去转成blob对象后就会出现下载的文件打不开并且报错文件格式类型不对的问题
在这里插入图片描述
完整的base64字符串是这样的？？？答案是这根本不是完整的base64字符串好不好！！！！
搜索了一番发现需要拼接上

"data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,"

这样结合后端返回的内容才是正常的base64

"data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,0M8R4KGxGuEAAAAAAAAAAAAAAAAAAAAAPgADAP7/....."

这样的话只需要写一个方法对这个base64类型的字符串进行一个处理就可以了。。。离大谱了属实

完整代码如下

this.$axios({
    method: "get",
    url: "/PM_Mould/DownloadTemplate",
	})
	.then((res) => {
          if (res.status === 200 && res.data) {
              const blob = this.$common.dataURItoBlob(
                "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64," +
                  res.data._buffer
              );
              //创建一个唯一的 URL
              const url = URL.createObjectURL(blob);
              //创建一个a标签
              const a = document.createElement("a");
              //将下载地址赋值给herf属性
              a.href = url;
              //设置下载文件的名字
              a.download = "ReportTemplate.xls";
              document.body.appendChild(a);
              a.click();
              URL.revokeObjectURL(a.href);
              document.body.removeChild(a);
        	}
	});

function dataURItoBlob (base64Data) {
  var byteString;
  if (base64Data.split(',')[0].indexOf('base64') >= 0) {
    byteString = window.atob(base64Data.split(',')[1]);
  } else {
    byteString = window.unescape(base64Data.split(',')[1]);
  }
  var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
  var ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], { type: mimeString });
}