各个浏览器a标签href下载文件链接长度过长,导致下载失败解决方案

一、问题:

开发中遇到下载exel文档;后端小哥返回来base64位的exel文件;刚开始文件比较小;本人使用创建a标签给href纸箱base64位文件

var a = document.createElement('a');
      a.download = fileName;
      var blobExel = e.target.result;//base64位文件
a.setAttribute('href',URL.createObjectURL(blobExel));

该方法在遇到下载文件超过2M左右文件的时候会在(IE、chrome等)很多浏览器下载失败

二、下载失败原因

经过认真对比,发现这个是各个浏览器对URL长度限制不同导致的;于是收集了各个浏览器的限制标准
IE 最大长度限制为2048字节
Chrome 最大长度限制为8182字节
Firefox 最大长度限制为65536字节
Safari 最大长度限制为80000字节
Opera 最大长度限制为190000字节

三、解决方案

后端返回的文件过大,长度过长导致了下载失败的问题;那就把href的长度变短点;把base64位文件转换成exel文件之后再把href只想该文件;废话不多说上代码

 baseExel:function (base64) {
            /*处理后端返回的base64位文件变成exel文件进行下载
            * 不要直接把base64位的exel文件直接给a标签的href,
            * 文件过大时base64位长度过长;chrome浏览器对a标签的href长度有限制;导致下载失败;
            * 建议用以下方法处理成本地文件再下载
            * */
            function getContentType(base64) {
                return /data:([^;]*);/i.exec(base64)[1];
            };
            function getData(base64) {
                return base64.substr(base64.indexOf("base64,") + 7, base64.length);
            };
            function b64toBlob(b64Data, contentType, sliceSize) {
                contentType = contentType || '';
                sliceSize = sliceSize || 512;
                var byteCharacters = atob(b64Data);
                var byteArrays = [];
                for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                    var slice = byteCharacters.slice(offset, offset + sliceSize);
                    var byteNumbers = new Array(slice.length);
                    for (var i = 0; i < slice.length; i++) {
                        byteNumbers[i] = slice.charCodeAt(i);
                    }
                    var byteArray = new Uint8Array(byteNumbers);
                    byteArrays.push(byteArray);
                }
                var blob = new Blob(byteArrays, { type: contentType });
                return blob;
            };
            return b64toBlob(getData(base64), getContentType(base64));
        },
  var a = document.createElement('a');
      var file=e.target.result;               
      a.download = fileName;
     var blobExel = self.baseExel(e.target.result); //把base64位文件转化为exel文件
     a.setAttribute('href',URL.createObjectURL(blobExel));
	$("body").append(a);    // 修复firefox中无法触发click
	a.click();
	$(a).remove();

把base64位文件转化成exel文件后下载就缩短了href的URL长度完美解决问题

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农有梦想

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值