最近碰见一个问题,a链接的href为base64,但在chrome下载时显示下载失败,经查询,base64过大会在某些浏览器上下载失败(如新版chrome),解决方法是将base64转为blob

function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
a.href = URL.createObjectURL(dataURLtoBlob(e.target.result))

备注:e.target.result为base64编码

a链接的href不能直接连Blob对象,得通过URL.createObjectURL() 静态方法将File对象或Blob对象生成URL。

Data URL是一种协议,能将资源转换为base64编码的字符串,并存储于URL中,且能与File、Blob相互转换。

Base64转Blob的更多相关文章

  1. JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  2. base64 和 Blob 相互转换

    Base64 to Blob function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/ ...

  3. base64和Blob互相转换

      1.base64转blob(二进制数据) /** * 将以base64的图片url数据转换为Blob * @param urlData 用url方式表示的base64图片数据 */ functio ...

  4. 图片预览(base64和blob:图片链接)和ajax上传、下载(带进度提示)

    直接上代码 html和js <!DOCTYPE html> <html> <head> <meta name="viewport" con ...

  5. base64和blob

    base64是二进制数据的一个编码格式,就像utf8一样的东西,他跟json一样,也是前后端交互能够相互识别的数据,他更多的是用来传递文件数据,并且如果是图片的base64,可以用来压缩 获取base ...

  6. uniapp中拿到base64转blob对象,或base64转bytes字节数组,io操作写入字节流文件bytes

    1. uniAPP中拿到附件的base64如何操作,如word文件 /*** 实现思路:* 通过native.js的io操作创建文件,拿到平台绝对路径* 再通过原生类进行base64解码,拿到字节流b ...

  7. 关于web前端base64转换为Blob,存入数组后 ajax请求传输到后端 接受不到文件问题

    前端console输出是正常Blob对象,通过ajax formdata 传输到 后端java SpringMvc用MultipartFile接受却一直接受不到,后来直接解析HttpServletRe ...

  8. JS 实现blob与base64互转

    /** * base64 to blob二进制 */ function dataURItoBlob(dataURI) { var mimeString = dataURI.split(',')[0]. ...

  9. js实现图片的Blob base64 ArrayBuffer 的各种转换

    一.相关基础知识 构造函数 FileReader() 返回一个新构造的FileReader 事件处理 FileReader.onabort  处理abort事件.该事件在读取操作被中断时触发. Fil ...

随机推荐

  1. 微信登陆,微信SDK授权登陆经验分享

    From:http://www.eoeandroid.com/thread-547012-1-1.html 最近因为项目需要做了微信登陆,好像也是微信最近才放出来的接口.还需要申请才能有权限实现授权. ...

  2. Vue基础-匿名插槽与作用域插槽的合并和覆盖行为

    Vue 测试版本:Vue.js v2.5.13 Vue 文档: <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容.多个插槽可以有不同的名字.具名插槽将匹配内容片段 ...

  3. 搜索R包和查看包的技巧

    1.R怎么搜包 # 安装sos包 install.packages("sos") # 导入sos包 library(sos) # 使用函数findFn() 函数里面传入关键字来搜索 ...

  4. packages managers

    nodejs npm/bower/component ...rubygemsperl cpanpython pipOS X homebrewsublime text的package-control 那 ...

  5. Gartner提出的7种多租户模型

    下面,我们就来看看在SaaS应用搭建过程中,可以采用什么样的多租户模型.从而能较为清晰地了解未来使用PaaS平台开发的SaaS,可以为用户提供哪些多租户的服务.        Gartner提出了7种 ...

  6. python学习笔记(五)— 内置函数

    我们常用的‘’int,str,dict,input,print,type,len‘’都属于内置函数 print(all([1,2,3,4]))#判断可迭代的对象里面的值是否都为真 print(any( ...

  7. ovn-kubernetes执行流程概述

    Master部分 1.master初始化 以node name创建一个distributed logical router 创建两个load balancer用于处理east-west traffic ...

  8. 理解Global interpreter lock

      Global interpreter lock (GIL) is a mechanism used in computer language interpreters to synchronize ...

  9. 配置MDM的描述文件

    配置描述文件 首先需要一个 MDM 配置描述文件,此文件用于安装到设备上,使其向 MDM 服务器注册为受管理的设备. 1.凭证 用iphone配置使用工具,新建一个配置描述文件,在“凭证”栏,创建新凭 ...

  10. xiaochengxubeijingt