各个浏览器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中无法触发clicka.click();$(a).remove();

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

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

浏览器兼容性--IE11以及Edge等下载文件的中文名出现乱码，前后端解决方案
浏览器兼容性--IE11以及Edge等下载文件的中文名出现乱码,前后端解决方案参考文章: (1)浏览器兼容性--IE11以及Edge等下载文件的中文名出现乱码,前后端解决方案 (2)https:// ...
使用火狐浏览器下载文件需要等很长时间的解决办法
前言:大伙日常在使用火狐浏览器的时候,经常遇到下载文件需要等很长的时间,今天给大家安利一个小技巧,让你的火狐下载文件的时候飞速提升. 1.打开火狐浏览器搜索 about:config ,接受风险并继续 ...
下载文件、（Blob数据流）下载PDF
下载文件.(Blob数据流)下载PDF 方法一 (a标签) downloadFile(file) {let url= '你的文件地址'const elink = document.createElem ...
python下载文件的11种方式_Python下载文件的11种方式
在本教程中,你将学习如何使用不同的Python模块从web下载文件.此外,你将下载常规文件.web页面.Amazon S3和其他资源. 最后,你将学习如何克服可能遇到的各种挑战,例如下载重定向的文件. ...
springboot上传下载文件（4）--上传下载工具类（已封装）
因为在做毕设,发现之前的搭建ftp文件服务器,通过ftp协议无法操作虚拟机临时文件,又因为ftp文件服务器搭建的比较麻烦:而 hadoop的HDFS虽然可以实现,但我这里用不到那么复杂的:所以我封装了 ...
linux下载文件夹到本地命令行,linux下载文件到本地命令，linux下载文件到本地命令下载工具...
linux下载文件到本地命令,linux下载文件到本地命令下载工具来源:互联网/编辑:佚名/时间:2020-09-08 在手机上看扫一扫进入手机端 linux用户命令在哪个文件夹下用 whic ...
视频下载网站链接：B站视频下载链接
视频下载网站链接:B站视频下载链接链接: 视频下载网站链接:B站视频下载链接
ug提示找不到html文件,[图文教程] 以下文件无法加载，导致打开操作失败：使用当前搜索选项找不到文件，部件已卸载...
UG打开装配文件时提示:以下文件无法加载,导致打开操作失败: 使用当前搜索选项找不到文件,部件已卸载. 如下图所示: 这个问题,看到很多UG初学者有时就会问到这个问题,很简单的一个问题,但是有时有必要 ...
a链接下载文件或者点击按钮自动下载
文件下载方法 downloadFile(fileName:string,filePath:string){this.service.downloadFile(filePath).subscribe(f ...

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

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

最新文章

热门文章