最近碰见一个问题,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. Arduino开发版学习计划--蜂鸣器

    文章内容参考:http://www.cnblogs.com/xiaowuyi/p/3343757.html 遇到不懂的方法,可以查看Arduino自带的API 就直接点击arduino的IDE里面菜单 ...

  2. JAVA NIO使用非阻塞模式实现高并发服务器

    参考:http://blog.csdn.net/zmx729618/article/details/51860699  https://zhuanlan.zhihu.com/p/23488863 ht ...

  3. 160601、Websocet服务端实现

    今天是六一儿童节,祝愿小朋友们节日快乐!大朋友们事事顺心! Websocet服务端实现 WebSocketConfig.Java ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  4. hdu1568&&hdu3117 求斐波那契数前四位和后四位

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1568 题意:如标题所示,求斐波那契数前四位,不足四位直接输出答案 斐波那契数列通式: 当n<=2 ...

  5. EntityFramework.DynamicFilters 实现软删除和租户过滤

    EntityFramework.DynamicFilters 实现软删除和租户过滤

  6. Storm-源码分析- Disruptor在storm中的使用

    Disruptor 2.0, (http://ifeve.com/disruptor-2-change/) Disruptor为了更便于使用, 在2.0做了比较大的调整, 比较突出的是更换了几乎所有的 ...

  7. Python 之网络编程

    # 流程描述: # # 1. 服务器根据地址类型(ipv4, ipv6), socket类型, 协议创建socket; # # 2. 服务器为socket绑定ip地址和端口号; # # 3. 服务器s ...

  8. Flask之flask-migrate

    简介 flask-migrate是flask的一个扩展模块,主要是扩展数据库表结构的. 官方文档:http://flask-migrate.readthedocs.io/en/latest/ 使用fl ...

  9. 【我的Android进阶之旅】Android 混淆文件资源分类整理

    之前将所有的混淆都配置在一个 proguard-rules.pro 这个Android Studio新建项目时自动生成的文件里面,而随着项目功能迭代越来越多,代码量越来越多,引用的第二方库.第三方库都 ...

  10. 003-shell 传递参数

    一.概述 可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 二.实例 以下实例我们向 ...