纯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 相关文章推荐
js multiple全选与取消全选实现代码
Dec 04 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
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
PHP CodeBase:将时间显示为"刚刚""n分钟/小时前"的方法详解
2013/06/06 PHP
10 个经典PHP函数
2013/10/17 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
关于COOKIE个数与大小的问题
2011/01/17 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
python爬取盘搜的有效链接实现代码
2019/07/20 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
新手学python应该下哪个版本
2020/06/11 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
出生公证委托书
2014/04/03 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
python flask框架快速入门
2021/05/14 Python
python实现简单聊天功能
2021/07/07 Python
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
MySQL分区路径子分区再分区
2022/04/13 MySQL
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis