解决H5的a标签的download属性下载service上的文件出现跨域问题


Posted in HTML / CSS onJuly 16, 2019

1.通过点击下载多媒体文件(图片/视频/文件等)

最简单的方式:

<a href='url' download="filename.ext">下载文件</a>

如果url指向同源资源,是正常的。

如果url指向第三方资源,download会失效,表现和不使用download时一致——浏览器能打开的文件,浏览器会直接打开,不能打开的文件,会直接下载。浏览器打开的文件,可以手动下载。

解决方案一:将文件打包为.zip/.rar等浏览器不能打开的文件下载。

解决方案二:通过后端转发,后端请求第三方资源,返回给前端,前端使用file-saver等工具保存文件。

如果url指向的第三方资源配置了CORS,download属性无效,但可以获取文件下载到本地,无法修改修改文件名。

2.解决方法

1. 借助HTML5 Blob实现文本信息文件下载

const downloadRes = async (url, name) => {
    let response = await fetch(url)
    // 内容转变成blob地址
    let blob = await response.blob()
    // 创建隐藏的可下载链接
    let objectUrl = window.URL.createObjectURL(blob)
    let a = document.createElement('a')
    //地址
    a.href = objectUrl
    //修改文件名
    a.download = name
    // 触发点击
    document.body.appendChild(a)
    a.click()
    //移除
    setTimeout(() => document.body.removeChild(a), 1000)
}

2.图片格式

如果我们想下载一张图片,可以把这张图片转换成base64格式,然后下载。

```
export const downloadImg = async (url, name) => {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function() {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL('image/png');
        let a = document.createElement('a');
        a.href = dataURL;
        a.download = name;
        document.body.appendChild(a);
        a.click();
        setTimeout(() => {
            document.body.removeChild(a);
            canvas = null;
        }, 1000);
    };
    img.src = url;
};
```

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
html通过canvas转成base64的方法
Jul 18 #HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 #HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 #HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 #HTML / CSS
把富文本的回车转为br标签
Aug 09 #HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 #HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 #HTML / CSS
You might like
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php自动适应范围的分页代码
2008/08/05 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
python设置检查点简单实现代码
2014/07/01 Python
Python输入二维数组方法
2018/04/13 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
Django 返回json数据的实现示例
2020/03/05 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
ktv收银员岗位职责
2013/12/16 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
清洁员岗位职责
2015/02/15 职场文书
薪资证明范本
2015/06/19 职场文书
通知怎么写?
2019/04/17 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript