利用 a 标签实现下载图片（不是打开）的正确姿势

1. 场景再现

当 a 标签中添加了 download 属性，想要实现下载图片时：

点击 a 链接，没有进行下载，而是在当前页面打开了图片

2. 原因

<a> 有 download 属性，可以实现下载 同源文件（ ip 和端口相同）

当图片 不同源 时，点击下载，会在当前窗口直接打开图片，而不是进入下载状态

3. 解决方案（两种）

3.1 使用 target 属性，打开新页面进行下载

这样可以维持当前页面状态，用户需要在新页面中保存图片

3.2 写一个点击事件，通过 canvas 方式 保存图片
<script>/*** 下载图片* @param {string} imgsrc 图片地址*/downloadIamge(imgsrc) {// 新建图片对象let image = new Image();// 解决跨域 Canvas 污染问题image.setAttribute("crossOrigin", "anonymous");// 图片加载image.onload = function() {// 新建 canvas标签let canvas = document.createElement("canvas");// 设置 canvas宽高canvas.width = image.width;canvas.height = image.height;// 添加 canvas画笔let context = canvas.getContext("2d");// 绘制图片context.drawImage(image, 0, 0, image.width, image.height);// 得到图片的 base64 编码let url = canvas.toDataURL("image/png");// 新建 a标签let a = document.createElement("a");// 新建点击事件let event = new MouseEvent("click");// 将图片的 base64 编码，设置为 a标签的地址a.href = url;// 触发点击事件a.dispatchEvent(event);};// 将图片地址 设置为 传入的参数 imgsrcimage.src = imgsrc;};/*** 下载方法* @param {string} filepath 文件地址*/downloads(filepath) {// isImageFile()：自定义函数，根据*后缀*判断是否是图片if (isImageFile(filepath)){this.downloadIamge(filepath)} else {this.downloadFile(filepath)}};
</script>

利用 a 标签实现下载图片（不是打开）的正确姿势相关推荐

第三百二十五节，web爬虫，scrapy模块标签选择器下载图片，以及正则匹配标签...
第三百二十五节,web爬虫,scrapy模块标签选择器下载图片,以及正则匹配标签标签选择器对象 HtmlXPathSelector()创建标签选择器对象,参数接收response回调的html对象 ...
html利用a标签实现下载本地的文件
在写html页面的时候,需要在网页上提供一个下载按钮可以下载我自己电脑中的文件.我已经知道了该文件的路径,但是之前看了很多文章都没找到正确办法,一直不知道如何能够下载本地的文件,经过不断实验发现,可以 ...
在html使用a标签直接下载图片不通过后台实现直接下载
由于a标签在HTML中链接图片会被识别并打开到网页上如果想下载这个图片的话就需要连接到后台读取文件并生成一个头信息下载.不过可以先给a标签加上一个download属性即可直接下载了. <a ...
通过a标签直接下载图片或文本文档
a标签直接下载文件如果遇到图片或文本文档则默认会直接打开,而不是下载,可以 <a href="/uploadfolder/xxxx.txt" download="文 ...
web爬虫，scrapy模块标签选择器下载图片，以及正则匹配标签
标签选择器对象 HtmlXPathSelector()创建标签选择器对象,参数接收response回调的html对象需要导入模块:from scrapy.selector import HtmlXP ...
4、web爬虫，scrapy模块标签选择器下载图片，以及正则匹配标签
标签选择器对象 HtmlXPathSelector()创建标签选择器对象,参数接收response回调的html对象需要导入模块:from scrapy.selector import HtmlXP ...
四 web爬虫，scrapy模块标签选择器下载图片，以及正则匹配标签
标签选择器对象 HtmlXPathSelector()创建标签选择器对象,参数接收response回调的html对象需要导入模块:from scrapy.selector import HtmlXP ...
java 点击a标签下载文档_使用a标签进行下载excel文件，打开下载后的文件内容为空，这是为什么？...
前端代码:下载后端代码: 接口:@ApiOperation(value = "下载") @GetMapping("/down") public void do ...
前端开发：a标签实现下载功能
应用背景前端项目实现下载文件的功能,在后台没给我们撸接口的情况下,我们可以利用a标签实现下载功能,而且贼简单~ 实现原理通过a标签的download的属性,将需要下载的文件放在前端项目中,然后hr ...

利用 a 标签实现下载图片（不是打开）的正确姿势

1. 场景再现

2. 原因

3. 解决方案（两种）

3.1 使用 target 属性，打开新页面进行下载

3.2 写一个点击事件，通过 canvas 方式保存图片

利用 a 标签实现下载图片（不是打开）的正确姿势相关推荐

最新文章

热门文章

利用 a 标签 实现 下载图片（不是打开）的正确姿势

1. 场景再现

2. 原因

3. 解决方案（两种）

3.1 使用 target 属性，打开新页面进行下载

3.2 写一个点击事件，通过 canvas 方式 保存图片

利用 a 标签 实现 下载图片（不是打开）的正确姿势相关推荐

最新文章

热门文章

利用 a 标签实现下载图片（不是打开）的正确姿势

3.2 写一个点击事件，通过 canvas 方式保存图片

利用 a 标签实现下载图片（不是打开）的正确姿势相关推荐