码迷,mamicode.com
首页 > 其他好文 > 详细

a标签 download base64 下载 网络失败

时间:2019-02-02 23:31:59      阅读:1496      评论:0      收藏:0      [点我收藏+]

标签:attr   span   code   路径   back   base64   col   spl   color   

使用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

a标签 download base64 下载 网络失败

标签:attr   span   code   路径   back   base64   col   spl   color   

原文地址:https://www.cnblogs.com/richard1015/p/10349259.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!