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. ModuleNotFoundError: No module named '_sqlite3'的解决办法:pipenv的用法

    export PIPENV_VENV_IN_PROJECT=1pipenv --venvpipenv --where pipenv install -r requirements.txtpipenv ...

  2. 显示Pl/Sql Developer window list窗口

    默认情况下Window List窗口是不显示的,这十分不方便 (一)在菜单项的Tools下的Preference选项中的UserInterface中选择Option,在右边对于的Autosave de ...

  3. GitHub-Tech-DotNet:Cnblogs

    ylbtech-GitHub-Tech-DotNet:Cnblogs 1.返回顶部 · EnyimMemcachedCore Forked from enyim/EnyimMemcached A Me ...

  4. php文件夹上传下载控件分享

    用过浏览器的开发人员都对大文件上传与下载比较困扰,之前遇到了一个php文件夹上传下载的问题,无奈之下自己开发了一套文件上传控件,在这里分享一下.希望能对你有所帮助. 以下是实例的部分脚本文件 这里我先 ...

  5. C基础知识(1):基本数据类型

    C的基本数据类型包括整型和浮点型,长度及精度信息如下: #include <stdio.h> #include <limits.h> #include <float.h& ...

  6. jvm的学习笔记:二、类的初始化,代码实战(1)

    对于静态字段来说,直接定义该字段的类才会被初始化 System.out.println(MyChild1.str); 输出: myParent1 static block hello myParent ...

  7. HCL试验六

    交换机R1: syssysname R1interface loopback 0ip add 192.168.10.1 24quinterface g0/0ip address 10.1.1.1 30 ...

  8. OpenStack组件——Nova计算资源管理

    1.nova介绍 Nova 是 OpenStack 最核心的服务,负责维护和管理云环境的计算资源.OpenStack 作为 IaaS 的云操作系统,虚拟机生命周期管理也就是通过 Nova 来实现的. ...

  9. 3 Java Web 入门 1 Servlet 入门

    1 Tomcat 1.1 安装 JDK Oracle 官网 1.2 安装 Tomcat

  10. Windows下的开发辅助神器——Chocolate Package Manager

    Windows下的开发辅助神器——Chocolate Package Manager:https://juejin.im/post/5c6cb3acf265da2dc4537235 Windows上的 ...