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: ...
随机推荐
- spring boot知识清单
https://mp.weixin.qq.com/s/q8OI2Ou8-gYP-usjToBbkQ
- 如何在网页中添加 jQuery。
转自:http://www.runoob.com/jquery/jquery-install.html 网页中添加 jQuery 可以通过多种方法在网页中添加 jQuery. 您可以使用以下方法: 从 ...
- Ironic 的 Rescue 救援模式实现流程
目录 文章目录 目录 救援模式 实现 UML 图 救援模式 以往只有虚拟机支持救援模式,裸机是不支持的.直到 Queen 版本 Ironic 实现了这个功能.救援模式下,用户可以完成修复.Troubl ...
- JSP 自定义标签的开发流程
1.编写一个实现Tag接口的标签处理器类 package cn.itcast.web.tag; import java.io.IOException; import javax.servlet.htt ...
- JavaScript数值千分位格式化的方法和性能
瞎掰的前提 前端嘛,经常处理数值和时间. 所以数值和时间的格式化少不了. 最近一直在面试前端, 就出了一个如何给数值添加千分位的面试题. 至于答案,我一直都有一种标准, 一是基于你现有的知识可以实现, ...
- 分布式架构-Redis 从入门到精通 完整案例 附源码
导读 篇幅较长,干货十足,阅读需要花点时间,全部手打出来的字,难免出现错别字,敬请谅解.珍惜原创,转载请注明出处,谢谢~! NoSql介绍与Redis介绍 什么是Redis? Redis是用C语言开发 ...
- Leetcode之动态规划(DP)专题-338. 比特位计数(Counting Bits)
Leetcode之动态规划(DP)专题-338. 比特位计数(Counting Bits) 给定一个非负整数 num.对于 0 ≤ i ≤ num 范围中的每个数字 i ,计算其二进制数中的 1 的数 ...
- PhpMyAdmin提示未加密
新版本的PhpMyAdmin 增强了安全性,需要在配置文件设置一个短语密码.否则进入之后会有“配置文件现在需要一个短语密码.”的红色警叹提示. 解决方法: .将 phpMyAdmin/librarie ...
- 【C/C++开发】循环中使用递减计数与递增计数的效率区别
有两个循环语句: 复制代码代码如下: for(i = n; i > 0; i--) { - } for(i = 0; i < n; i++) { - } 为什么前者比后者快 ...
- [c++] WINAPI
int WINAPI WINMain 中,WINAPI含义 在windef.h头文件中有如下定义: #define WINAPI __stdcall #define APIENTRY WINAPI 函 ...