[html] 使用a标签的download属性下载文件会有跨域问题吗？如何解决？

最近刚遇到这个问题，后台返回的图片链接，点击按钮批量下载，a标签的 download 属性只对同源文件有效，
所以我们这里先把图片 url 转为 blob 格式，然后再下载/**** 将图片 url 转换为 blob 格式** @param httpUrl: 图片链接，如 https://cdn.aaa.com/bbb.jpg*/private async urlToBlob(httpUrl) {const res: Response = await fetch(httpUrl);const blob: Blob = await res.blob();const blobUrl = URL.createObjectURL(blob);return blobUrl;}/**** 下载图片到本地** @param blobUrl： blob 格式的图片文件** @param name: 图片名称*/private download(blobUrl, name) {// 创建虚拟a标签const eleLink = document.createElement('a');eleLink.download = name;eleLink.style.display = 'none';eleLink.href = blobUrl;// 触发点击document.body.appendChild(eleLink);eleLink.click();// 然后移除document.body.removeChild(eleLink);URL.revokeObjectURL(blobUrl);}

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[html] 使用a标签的download属性下载文件会有跨域问题吗？如何解决？相关推荐

前端文件下载利用a标签的download属性下载文件
1.对于后端返回的是url下载地址代码(可直接复制拿去用): // 点击下载文件参数href:下载地址,参数filename:文件名(如后端没有返回文件,可自定义文件名)downloadFile(h ...
解决H5的a标签的download属性下载service上的文件/图片出现跨域问题
1.通过点击下载多媒体文件(图片/视频/文件等) 最简单的方式: <a href='url' download="filename.ext">下载文件</a> ...
关于a标签添加了download属性下载文件失败的问题
话不多说,先上图相信各位大神看了图会明白,每次点击会下载,但是每次都是下载失败,未发现文件,请各位大佬指教-
逻辑(html)_文件下载(a标签的download属性)
目录需求描述实现过程实现代码问题原因解决知识点需求描述需求:当点击按钮时,可以下载模板文件,下载地址如下 https://file2.clipworks.com/4c217acc09 ...
[html] 通过设置表单的target=“_blank“来下载文件会被浏览器拦截吗？如何解决？
[html] 通过设置表单的target="_blank"来下载文件会被浏览器拦截吗?如何解决? 不用表单下载,动态创建一个a标签, 设置href, target="_s ...
Day134-136.尚品汇：平台属性接口、SPU、跨域问题、配置持久化、MinIO 分布式文件存储系统
目录 Day 02 商品后台管理系统 1. 商品基本知识 2. 回顾Mybatis 3. 添加平台属性接口 (多表查询) Day 03 完成后台平台属性管理.SPU 1. 修改平台属性 2. gate ...
＜a＞＜/a＞标签，download属性不下载，而是打开.doc、.txt、.mp3、img，解决方法
情况:公司特别钟爱,导出,下载,批量下载,打印,批量打印,今天遇到下载mp3文件时,只是在线打开,并不下载.因为同源的文件,浏览器默认是打开预览,不同源的才下载.利用get请求转成文件流就可以了. 解 ...
HTML5 a标签的download属性
[转载请注明出处:http://blog.csdn.net/leytton/article/details/38545299] download属性能让我们指定浏览器下载时采用新的文件名称,也就是在客 ...
a标签的download属性(荐)
在html 中 a 链接有 download 这样一个属性它有什么用呢?! 我们在页面中提供下载的时候,都需要去配置一些服务端的东西,比如指定 zip 文件就通知浏览器下载这个文件. 但是,比如 . ...

[html] 使用a标签的download属性下载文件会有跨域问题吗？如何解决？

[html] 使用a标签的download属性下载文件会有跨域问题吗？如何解决？

个人简介

主目录

[html] 使用a标签的download属性下载文件会有跨域问题吗？如何解决？相关推荐

最新文章

热门文章