a标签的download属性
a标签加上downlaod属性后,就可完成对href属性链接文件的下载,但仅仅是限于同源文件,如果是非同源,download属性会失效。
无download属性的时候,a标签的默认行为是链接跳转进行预览,而针对浏览无法预览的文件,也可达到下载的效果。
怎么解决下载非同源文件的问题?? 例如image图片
方法: 通过canvas绘制,生成临时路径 (
data协议路径 // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
),这个路径就是一个同源路径,然后传入下载函数进行下载。
let img = new Image();
img.setAttribute('crossOrigin', 'anonymous')
img.src = data.entry;
img.onload = function(data) {
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
let context = canvas.getContext('2d');
context.drawImage(img, 0, 0, canvas.width, canvas.height);
let url = canvas.toDataURL('image/png');
downLoadByLink(url,"小程序码");
}
const downLoadByLink = (url, filename) =>{
//如果提供filename,则filename需要包含扩展名
var link,
evt;
link = document.createElement('a');
link.href = url;
filename && link.setAttribute('download', filename);
if(document.fireEvent) {
window.open(link.href);
}else {
evt = document.createEvent('MouseEvents');
evt.initEvent('click', true, true);
link.dispatchEvent(evt);
}
};
a标签的download属性的更多相关文章
- HTML5 a标签的download属性
介绍一个HTML5的新特性 a标签的download属性: 目前市场上面支持的浏览器有限: html: <!DOCTYPE html> <html> <body> ...
- jQuery --- 利用a标签的download属性下载文件!
最近遇到一个项目,需要有点击下载文件的功能. 由于文件格式是多种的,对于 rar / zip / rtf / doc / xlsx / jpg等. 点击下载有的是直接跳转到后进行下载,但有的是打开进行 ...
- a标签的download属性简介
最近在工作中需要一个前端直接下载静态文件的需求,之前有粗略的了解过a标签的download属性,通过download和href属性可以实现文件的下载. 简介 HTML <a> 元素 (或锚 ...
- a 标签的download 属性在谷歌浏览器下无法下载图片,如何处理?
a 标签的download属性在下载图片文件的时候是如何的方便,可是可是谷歌浏览器不支持下载,而是下载打开新窗口预览图片.这个兼容性问题如何解决呢? 了解了一番,HTMLCanvasElement.t ...
- HTML <a> download 属性,点击链接来下载图片
Html5里面的 标签的 Download 属性可以设置一个值来规定下载文件的名称.所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, ...
- HTML5 a标签的down属性进行图片下载
a标签中的down属性时HTML5新增的属性,此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件.目前该属性的兼容性如下: 具体代码实现: /* 主要原理:利用a标签的do ...
- HTML5 <a>标签download 属性
一.简单实例 <a href="../images/1.jpg" download="下载图片.jpg"> 点击按钮下载 </a> 二. ...
- 火狐 a 标签 download 属性,要在 a 标签添加到页面中才生效;
在 chrome 中,如果需要设置点击下载文件,需要创建一个 a 标签,指定 download 属性和 href 属性即可, var aLink = document.createElement('a ...
- JS/HTML 保存图片到本地:HTML <a> download 属性
JS如何保存图片到本地呢?自己百度一下吧! 这里想要说的是,可以利用 HTML 的 <a> 标签 来是实现保存图片到本地的功能,参考代码如下: <a href="http: ...
随机推荐
- idea 错误: 找不到或无法加载主类 xxx.xxx.xxxxx
idea 错误: 找不到或无法加载主类 xxx.xxx.xxxxx JDK环境,maven项目还是ee还是web项目,是否都正常. 如果是用idea打开的话,在源码目录上点击右键,然后找到Mark d ...
- Linux0.11之进程0创建进程1(1)
进程0是由linus写在操作系统文件中的,是预先写死了的.那么进程0以后的进程是如何创建的呢?本篇文章主要讲述进程0创建进程1的过程. 在创建之前,操作系统先是进行了一系列的初始化,分别为设备号.块号 ...
- Ansible变量嵌套解析
有时候需要用到ansible的变量的嵌套解析,就是“变量中嵌套变量”.例子如下: 假设有一个外部传递的变量,system_code = CRM,而我们同时有一系列类似的变量,如: ABS_port=1 ...
- java:zookeeper集群配置,dubbo
1.zookeeper集群配置: 2.dubbo:(配置见视频)
- 参考:菜菜的sklearn教学之降维算法.pdf!!
PCA(主成分分析法) 1. PCA(最大化方差定义或者最小化投影误差定义)是一种无监督算法,也就是我们不需要标签也能对数据做降维,这就使得其应用范围更加广泛了.那么PCA的核心思想是什么呢? 例如D ...
- 解决 nw 报错 net::ERR_UNSAFE_PORT
今天 nw 应用里面的前端请求突然不发送了,也没有异常的信息,后来换上开发版 nw 立刻就发现了报错: net::ERR_UNSAFE_PORT 这个错误的意思很明显,就是请求的 http 端 ...
- pthon基础知识(索引、切片、序列相加、乘法、检查元素是否是序列成员、计算序列长度、最大最小值)
序列 数据存储方式 数据结构 python 列表.元组.字典.集合.字符串 序列: 一块用于存放多个值的连续内存空间,并且按一定顺序排列,可以通过索引取值 索引(编号): 索引可以是负数 从左到 ...
- python 连接Oracle 的步骤
1. 安装 cx_Oracle pip install cx_Oracle 2.配置 oci.dll 与 oraociei11.dll 添加到环境变量path中 下载地址:百度搜索下载,Oracle ...
- yum tenxun ntpdate 时间同步
centos7 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.cloud.tencent.com/repo/centos7_base ...
- json字段为null时输出空字符串
Map < String , Object > jsonMap = new HashMap< String , Object>(); jsonMap.put(); jsonMa ...