a标签 download base64 下载 网络失败

Posted 2021-02-07 richard1015

使用html2canvas 生成尺寸较大 base64 后进行 a标签  download 下载 ，浏览器报网络失败错误

通过谷歌搜索 发现原因是

因为截取尺寸较大  导致生成base64 长度太大 ,达到了a标签的href 上限，所以报错下载失败，解决方案是 将base64 dataURI转换为Blob 文件对象

然后a 链接下载 blob文件路径

// edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
function dataURIToBlob(dataURI, callback) {
  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);
  }

  callback(new Blob([arr]));
}

var callback = function(blob) {
    var a = document.createElement(‘a‘);
    a.download = fileName;
    a.innerHTML = ‘download‘;
    // the string representation of the object URL will be small enough to workaround the browser‘s limitations
    a.href = URL.createObjectURL(blob);
    // you must revoke the object URL, 
    //   but since we can‘t know when the download occured, we have to attach it on the click handler..
    a.onclick = function() {
      // ..and to wait a frame
      requestAnimationFrame(function() {
          URL.revokeObjectURL(a.href);
        });
        a.removeAttribute(‘href‘)
      };
    };

dataURIToBlob(yourDataURL, callback);

 

解决链接:https://stackoverflow.com/questions/37135417/download-canvas-as-png-in-fabric-js-giving-network-error