解决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 10 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
php函数与传递参数实例分析
2014/11/15 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
input 高级限制级用法
2009/03/26 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python中as用法实例分析
2015/04/30 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python实现自动发送邮件功能
2021/03/02 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
python多维数组分位数的求取方式
2020/03/03 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
自动化职业生涯规划书范文
2014/01/03 职场文书
学习委员自我鉴定
2014/01/13 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
解除施工合同协议书
2014/10/17 职场文书
校园安全主题班会
2015/08/12 职场文书