网上找了好多方法都是不能用的,经过试验在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怎么将图片下载而不是直接打开的更多相关文章

  1. 浏览器中js执行机制学习笔记

    浏览器中js执行机制学习笔记 RiverSouthMan关注 0.0772019.05.15 20:56:37字数 872阅读 291 同步任务 当一个脚本第一次执行的时候,js引擎会解析这段代码,并 ...

  2. IE11浏览器中的My97日历控件刷新后无法打开问题解决办法

    IE11浏览器中的My97日历控件刷新后无法打开问题解决办法   IE11浏览器中的My97日历控件刷新后无法打开问题解决办法:(谷歌浏览器下正常.IE11失效) 解决办法:1:找到WdatePick ...

  3. 解决webkit浏览器中js方法中使用window.event提示未定义的问题

    这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的 ...

  4. 浏览器中 JS 的事件循环机制

    目录 事件循环机制 宏任务与微任务 实例分析 参考 1.事件循环机制 浏览器执行JS代码大致可以分为三个步骤,而这三个步骤的往复构成了JS的事件循环机制(如图). 第一步:主线程(JS引擎线程)中执行 ...

  5. Vue-cli构建项目, 组件中js代码引入图片路径问题

    问题描述 .vue的组件分成三个部分, template结构部分, script路径代码, style页面样式 首先, 我们可以在template可以正确引入, 无论是dev, 还是build都没有问 ...

  6. 使用 html2canvas 将页面中某一部分转为图片下载

    今天在项目中遇到一个需求是将生成的二维码和一些背景作为海报,然后将海报以图片的形式下载 使用了 html2canvas  插件 import html2canvas from "html2c ...

  7. IE9浏览器中的My97日历控件刷新后无法打开问题解决办法

    解决办法如下: 1:找到WdatePicker.js 2:将$crossFrame:true 改为$crossFrame:false. 3:重启服务,刷新页面发现OK.

  8. JavaScript 浏览器中的事件

    1.事件的基本概念 事件是指在文档或者浏览器中发生的一些特定交互瞬间,比如打开某一个网页,浏览器加载完成后会触发 load 事件,当鼠标悬浮于某一个元素上时会触发 hover 事件,当鼠标点击某一个元 ...

  9. 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

随机推荐

  1. 人人都爱Kubernetes,Docker难道就不香了吗?

    开篇 提起Docker,有很多人第一印象会认为它就是一个虚拟化容器,所以大家特别容易陷入到一种误区,就是觉得Docker只是在Linux操作系统之上又增加了一层,就跟OS上跑了一个VMWare一样.D ...

  2. java集合-数组ArrayList

    1.简介 ArrayList是java集合框架常用的集合类之一,底层是基于数组来实现容量大小动态变化的. 2.类图(JDK 1.8) 下图是ArrayList实现的接口和继承的类关系图: public ...

  3. Word·去掉复制粘贴自动添加的空格

    阅文时长 | 0.05分钟 字数统计 | 145.6字符 主要内容 | 1.引言&背景 2.声明与参考资料 『Word·去掉复制粘贴自动添加的空格』 编写人 | SCscHero 编写时间 | ...

  4. (五)Jira Api对接:修改任务状态

    项目迭代结束后我们需要把sprint下面的story.task任务状态修改到结束状态,如果手动修改会花费不少时间,本文就介绍如何通过jira api自动修改任务状态,提高工作效率. 一.查看任务工作流 ...

  5. [web] 虚拟机网络设置

    三种模式 桥接(Bridged):主机网卡--虚拟网桥--虚拟机网卡,把主机虚拟为交换机,虚拟机ip需与主机设置在同一网段,网关与DNS与主机网卡一致 地址转换(NAT):主机网卡--虚拟NAT设备- ...

  6. [转载]好好好centos7 安装 KVM

    centos7 安装 KVM  2019-04-03 09:58:24     34     0     0 一.基础环境准备 centos7.X 最小环境安装 关闭selinux # vi /etc ...

  7. 056.Python前端Django模型ORM多表基本操作

    一 准备工作 1.1 新建一个项目 root@darren-virtual-machine:~# cd /root/PycharmProjects/ root@darren-virtual-machi ...

  8. ubuntu中安装visual studio code-(转载)

    在Ubuntu中安装Visual Studio Code 编译自:http://itsfoss.com/install-visual-studio-code-ubuntu/ 作者: Abhishek ...

  9. Python爬取微信小程序(Charles)

    Python爬取微信小程序(Charles) 本文链接:https://blog.csdn.net/HeyShHeyou/article/details/90045204 一.前言 最近需要获取微信小 ...

  10. 永远的Ace 实验四 团队作业1:软件研发团队组建

    项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/2018CST/ 这个作业要求链接 https://www.cnblogs.com/nwnu-da ...