纯javascript前端实现base64图片下载(兼容IE10+)


Posted in Javascript onSeptember 14, 2018

背景

在项目开发过程中,经常会有图片导出的需求,尤其是带有图表类的应用,通常需要将图表下载导出。

在chrome等新版浏览器中实现base64图片的下载还是比较容易的:

  1. 创建一个a标签
  2. 将a标签的href属性赋值为图片的base64编码
  3. 指定a标签的download属性,作为下载文件的名称
  4. 触发a标签的点击事件

但是这套逻辑在IE下是不行的,这样写会直接报错。

所以IE下需要单独处理,这里IE在处理这种文件的时候给提供了一个单独的方法:window.navigator.msSaveOrOpenBlob(blob, download_filename)调用这个方法可以直接触发IE的下载,还是比较方便的。具体做法如下:

// 截取base64的数据内容(去掉前面的描述信息,类似这样的一段:data:image/png;base64,)并解码为2进制数据
var bstr = atob(imgUrl.split(',')[1]) 
// 获取解码后的二进制数据的长度,用于后面创建二进制数据容器
var n = bstr.length 
// 创建一个Uint8Array类型的数组以存放二进制数据
var u8arr = new Uint8Array(n) 
// 将二进制数据存入Uint8Array类型的数组中
while (n--) {
 u8arr[n] = bstr.charCodeAt(n) 
}
// 创建blob对象
var blob = new Blob([u8arr])
// 调用浏览器的方法,调起IE的下载流程
window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')

整体实现代码

// 这里是获取到的图片base64编码,这里只是个例子哈,要自行编码图片替换这里才能测试看到效果
 const imgUrl = 'data:image/png;base64,...'
 // 如果浏览器支持msSaveOrOpenBlob方法(也就是使用IE浏览器的时候),那么调用该方法去下载图片
 if (window.navigator.msSaveOrOpenBlob) {
  var bstr = atob(imgUrl.split(',')[1])
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
   u8arr[n] = bstr.charCodeAt(n)
  }
  var blob = new Blob([u8arr])
  window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
 } else {
  // 这里就按照chrome等新版浏览器来处理
  const a = document.createElement('a')
  a.href = imgUrl
  a.setAttribute('download', 'chart-download')
  a.click()
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 的方法重载效果
Aug 07 Javascript
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
js post提交调用方法
Feb 12 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
react 国际化的实现代码示例
Sep 14 #Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 #Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 #Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 #Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 #Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 #Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 #Javascript
You might like
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
js读取配置文件自写
2014/02/11 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
python中精确输出JSON浮点数的方法
2014/04/18 Python
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
python的else子句使用指南
2016/02/27 Python
Python装饰器用法示例小结
2018/02/11 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
python实现五子棋小程序
2019/06/18 Python
简单了解python反射机制的一些知识
2019/07/13 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
Python如何发送与接收大型数组
2020/08/07 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
幼儿园庆六一活动方案
2014/03/06 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
校园广播稿100字
2014/10/06 职场文书
老兵退伍标语
2014/10/07 职场文书
求职简历自我评价范文
2015/03/10 职场文书
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis