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属性的更多相关文章

  1. HTML5 a标签的download属性

    介绍一个HTML5的新特性 a标签的download属性: 目前市场上面支持的浏览器有限: html: <!DOCTYPE html> <html> <body> ...

  2. jQuery --- 利用a标签的download属性下载文件!

    最近遇到一个项目,需要有点击下载文件的功能. 由于文件格式是多种的,对于 rar / zip / rtf / doc / xlsx / jpg等. 点击下载有的是直接跳转到后进行下载,但有的是打开进行 ...

  3. a标签的download属性简介

    最近在工作中需要一个前端直接下载静态文件的需求,之前有粗略的了解过a标签的download属性,通过download和href属性可以实现文件的下载. 简介 HTML <a> 元素 (或锚 ...

  4. a 标签的download 属性在谷歌浏览器下无法下载图片,如何处理?

    a 标签的download属性在下载图片文件的时候是如何的方便,可是可是谷歌浏览器不支持下载,而是下载打开新窗口预览图片.这个兼容性问题如何解决呢? 了解了一番,HTMLCanvasElement.t ...

  5. HTML <a> download 属性,点击链接来下载图片

    Html5里面的 标签的 Download 属性可以设置一个值来规定下载文件的名称.所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, ...

  6. HTML5 a标签的down属性进行图片下载

    a标签中的down属性时HTML5新增的属性,此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件.目前该属性的兼容性如下: 具体代码实现: /* 主要原理:利用a标签的do ...

  7. HTML5 <a>标签download 属性

    一.简单实例 <a href="../images/1.jpg" download="下载图片.jpg"> 点击按钮下载 </a> 二. ...

  8. 火狐 a 标签 download 属性,要在 a 标签添加到页面中才生效;

    在 chrome 中,如果需要设置点击下载文件,需要创建一个 a 标签,指定 download 属性和 href 属性即可, var aLink = document.createElement('a ...

  9. JS/HTML 保存图片到本地:HTML <a> download 属性

    JS如何保存图片到本地呢?自己百度一下吧! 这里想要说的是,可以利用 HTML 的 <a> 标签 来是实现保存图片到本地的功能,参考代码如下: <a href="http: ...

随机推荐

  1. EBS GL 日记账行“账户说明”段说明显示不全

    问题描述: 路径:总帐管理超级用户/日记帐/输入 如下图所示,日记账行的“账户说明字段”段值说明显示不全 解决方法: 路径:总帐管理超级用户/设置/财务系统/弹性域/关键字/段 如下图所示,找到相应的 ...

  2. jquery 复合事件 toggle()方法的使用

    定义和用法 toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件. 语法: $(selector).toggle(function1(),function2 ...

  3. linux目录简介说明

  4. 再谈用Excel计算年龄

    有的时候,对于客人的信息并不是全知,那么身份证就可能用15位来代替,这个时候怎么计算年龄呢?有一个很简单的公式,可以一次性计算15位或18位身份证的年龄. 首先,需要判断一下,这个身份证是15位还是1 ...

  5. 离线安装nuget包EPPlus

    1先去https://www.nuget.org/packages/EPPlus/4.1.0下载,epplus.4.1.0.nupkg 2找到本地文件位置:H:\DOWNLOAD\ 3在vs的程序包管 ...

  6. 解剖PTP协议

    一. PTP是什么? 英文为Precise Time Protocol,翻译过来就是精确时间协议 二. 为何会出现PTP? 大家想必是知道NTP的存在,然而NTP的精度很低,只能达到毫秒级别的精度,那 ...

  7. ubuntu安装相关

    安装系统参考:http://xinzhi.wenda.so.com/a/1523530837610141 首先进行更新源 sudo apt-get update 安装codeblocks sudo a ...

  8. Windows下Java JDK环境变量的配置

    注意:前提是你已经在电脑上安装了JDK 1.打开控制面板—系统和安全—系统,选择高级系统设置 2.选择环境变量 3. 然后看看用户变量中有没有JAVA_HOME和CLASSPATH变量 4.新建JAV ...

  9. ServletRequest与ServletResponse

    http://lavasoft.blog.51cto.com/62575/275586/ 请求和相应是Web交互最基本的模式,在Servlet中,分别用HttpServletRequest与HttpS ...

  10. 如何让JavaScript元素运动起来 ?

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...