浏览器中js怎么将图片下载而不是直接打开
网上找了好多方法都是不能用的,经过试验在Chrome中都是直接打开。
经过自己的摸索,找到了一套能用的解决方案
var database = "data:image/jpg;base64," + data.data;
let aLink = document.createElement('a');
let blob = this.base64ToBlob(database ); //new Blob([content]);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));//兼容火狐
这种方式需要让后台给一个base64的字符串。
base64前台显示图片的方法
$("#image").attr("src", "data:image/jpg;base64," + data.data);
浏览器中js怎么将图片下载而不是直接打开的更多相关文章
- 浏览器中js执行机制学习笔记
浏览器中js执行机制学习笔记 RiverSouthMan关注 0.0772019.05.15 20:56:37字数 872阅读 291 同步任务 当一个脚本第一次执行的时候,js引擎会解析这段代码,并 ...
- IE11浏览器中的My97日历控件刷新后无法打开问题解决办法
IE11浏览器中的My97日历控件刷新后无法打开问题解决办法 IE11浏览器中的My97日历控件刷新后无法打开问题解决办法:(谷歌浏览器下正常.IE11失效) 解决办法:1:找到WdatePick ...
- 解决webkit浏览器中js方法中使用window.event提示未定义的问题
这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的 ...
- 浏览器中 JS 的事件循环机制
目录 事件循环机制 宏任务与微任务 实例分析 参考 1.事件循环机制 浏览器执行JS代码大致可以分为三个步骤,而这三个步骤的往复构成了JS的事件循环机制(如图). 第一步:主线程(JS引擎线程)中执行 ...
- Vue-cli构建项目, 组件中js代码引入图片路径问题
问题描述 .vue的组件分成三个部分, template结构部分, script路径代码, style页面样式 首先, 我们可以在template可以正确引入, 无论是dev, 还是build都没有问 ...
- 使用 html2canvas 将页面中某一部分转为图片下载
今天在项目中遇到一个需求是将生成的二维码和一些背景作为海报,然后将海报以图片的形式下载 使用了 html2canvas 插件 import html2canvas from "html2c ...
- IE9浏览器中的My97日历控件刷新后无法打开问题解决办法
解决办法如下: 1:找到WdatePicker.js 2:将$crossFrame:true 改为$crossFrame:false. 3:重启服务,刷新页面发现OK.
- JavaScript 浏览器中的事件
1.事件的基本概念 事件是指在文档或者浏览器中发生的一些特定交互瞬间,比如打开某一个网页,浏览器加载完成后会触发 load 事件,当鼠标悬浮于某一个元素上时会触发 hover 事件,当鼠标点击某一个元 ...
- 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)
第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...
随机推荐
- 【Web前端HTML5&CSS3】08-盒模型补充
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 盒模型补充及田径场实战 1. 盒子大小 2. 轮廓 3. 阴影 4. 圆角 圆 椭圆 盒模型补充及田径场实战 1 ...
- mate桌面用户 root 自动登录lightdm.conf -20190520 方法【fedora 21】mate
桌面用户自动登录lightdm.conf -20190520 方法修改 /etc/lightdm/lightdm.conf 步骤:1 vim /etc/lightdm/lightdm.conf 解除 ...
- [转载]XStar's Libvirt+KVM部署记录 目录
XStar's Libvirt+KVM部署记录 目录 Create: 2013-12-11 Update: 2014-01-03 准备工作 KVM网站 http://sourceforge.net/p ...
- Linux 目录管理
tree命令的基本使用 tree 查看当前目录的树状结构 -a 查看所有包含隐藏文件 -L 1 查看目录层级 tree /root 指定目录 根目录下的主要文件 /bin 普通用户可以执行的二进制文件 ...
- MyBatis 项目开发中是基于 XML 还是注解?
只要你对 MyBatis 有所认识和了解,想必知道 MyBatis 有两种 SQL 语句映射模式,一种是基于注解,一种是基于XML. 基于 XML <mapper namespace=" ...
- 抓住异步编程async/await语法糖的牛鼻子: SynchronizationContext
长话短说,本文带大家抓住异步编程async/await语法糖的牛鼻子: SynchronizationContext 引言 C#异步编程语法糖async/await,使开发者很容易就能编写异步代码. ...
- 也谈如何写一个Webserver(三)
在上一篇里,我介绍了如何应用socket和epoll来组织和管理从客户端(如,浏览器)传入的连接,通过设置非阻塞连接让Webserver有更好的性能. 下面,我介绍一下在我写的Webserver Ma ...
- Ubuntu中的MySQL修改root密码的多种方法
查看.修改mysql的用户名和密码第一步:这时你需要进入/etc/mysql目录下,然后sudo vim/vi debian.cnf查看里面的用户名和密码,然后使用这个文件中的用户名和密码进入mysq ...
- KVO后[obj class]与object_getClass(id obj)的结果竟会不一致?
说说背景,研究下面的代码时,KVO后[obj class]与object_getClass(id obj)的结果竟会不一致? PersonModel *aPersonModel = [[PersonM ...
- 『动善时』JMeter基础 — 37、将JMeter测试结果写入Excel
目录 1.环境准备 (1)引入操作Excel文件的基础JAR包 (2)引入封装自定义操作Excel文件的JAR包 2.准备测试需要的数据 3.测试结果写入Excel演示 (1)测试计划内包含的元件 ( ...