浏览器中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执行顺序 ...
随机推荐
- QFNU 10-30 training
7-9 特立独行的幸福 题意:见PTA 思路:其实就是遍历进行查找,利用递归函数,为了解决是特立独行,还要用一个全局数组进行存储所有满足条件的数进行去重标记,最后在输出的时候进行判断是否是只读取过一次 ...
- [2021BUAA软工_助教博客]作业成绩汇总
作业及成绩 作业链接 成绩链接 个人阅读作业#1 个人阅读作业#1_成绩 个人阅读作业#2 个人阅读作业#2_成绩 结对项目-第一阶段 结对项目-第一阶段_成绩 结对项目-第二阶段 结对项目-第二阶段 ...
- 企业选择CRM系统的要点
经过十数年的发展,CRM客户管理系统在企业当中开始家喻户晓,它的普及性也越来越高.管理者们也纷纷意识到CRM系统--这种企业管理工具带来的巨大好处.既然CRM给企业带来这么大的好处,那么企业该怎么选择 ...
- MSSQL·查询T-SQL语句执行时间的三种方法
阅文时长 | 0.23分钟 字数统计 | 420.8字符 主要内容 | 1.引言&背景 2.自定义时间变量求差法 3.MSSQL内置方法 4.MSSQL选项开启时间统计 5.声明与参考资料 『 ...
- Docker 中运行 ElasticSearch 和 Kibana
ElasticSearch 是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口:Kibana 是一个开源的分析和可视化平台,可以搜索,查看. ...
- [bug] Unrecognized token 'code': was expecting (JSON String, Number, Array, Object,'true', 'false' or 'null')
JSON格式有误,需用JSON.stringify()函数转换一下 参考 https://www.cnblogs.com/sunyanblog/p/13788740.html https://www. ...
- 使用CSS样式的三种方法
一.内联样式 内联样式通过style属性来设置,属性值可以任意的CSS样式. 1 <!DOCTYPE html> 2 <html lang="en"> 3 ...
- 大数据开发-Flink-窗口全解析
Flink窗口背景 Flink认为Batch是Streaming的一个特例,因此Flink底层引擎是一个流式引擎,在上面实现了流处理和批处理.而Window就是从Streaming到Batch的桥梁. ...
- 贪心算法leetcode-763
int[] lastShow = new int[26]; var list = new LinkedList<Integer>(); for (int i = 0; i < s.l ...
- 1. 回顾Servlet
回顾Servlet 创建web工程 servlet-api:http://dwz.date/aTGa 编写Servlet import javax.servlet.ServletException; ...