利用base64下载文件，以及它因文件过大无法下载的问题

最新推荐文章于 2024-08-28 04:21:18 发布

Ich Lieb' Dich immer

最新推荐文章于 2024-08-28 04:21:18 发布

阅读量2.7k

点赞数

分类专栏： js方法

本文链接：https://blog.csdn.net/ichLiebDich/article/details/108100607

版权

js方法专栏收录该内容

5 篇文章 0 订阅

订阅专栏

接口返回结果如此

在这里插入图片描述

代码

exportByBase64(response) {
      // const bloburl = dataURIToBlob(response.file)
      var downloadElement = document.createElement("a");
      // downloadElement.href =  URL.createObjectURL(bloburl);
      downloadElement.href =  response.file;
      downloadElement.download = response.filename; //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      window.URL.revokeObjectURL(downloadElement.href); //释放掉blob对象
    },

问题

当文件太大时，会因为a标签的href属性长度上限导致最多只能下载近4m左右的文件，当文件过大时，要将base64转化为blob格式，再URL.createObjectURL转为url，用a标签打开

function dataURIToBlob(dataURI) {
  var binStr = atob(dataURI.split(',')[1]),
    len = binStr.length,
    arr = new Uint8Array(len);

  for (var i = 0; i < len; i++) {
    arr[i] = binStr.charCodeAt(i);
  }
  return new Blob([arr])
}
exportByBase64(response) {
      const bloburl = dataURIToBlob(response.file)
      var downloadElement = document.createElement("a");
      downloadElement.href =  URL.createObjectURL(bloburl);
      downloadElement.download = response.filename; //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      window.URL.revokeObjectURL(downloadElement.href); //释放掉blob对象
    },