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

Charles 发布于2019-08-26 18:36 / 2893人阅读

摘要：通过点击下载多媒体文件图片视频文件等最简单的方式下载文件如果指向同源资源，是正常的。解决方案一将文件打包为等浏览器不能打开的文件下载。如果指向的第三方资源配置了，属性无效，但可以获取文件下载到本地，无法修改修改文件名。

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

最简单的方式：

下载文件

如果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;
};
```

云服务器 GPU云服务器阿里云服务器容易出现的问题阿里云服务器出现问题怎么解决 cdn的出现问题云主机可能出现的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110264.html

[ 一起学React系列 -- 9 ] React中的文件下载

摘要：本篇所说的文件下载也是基于和或者都行。的返回值是一个有意思的对象，它包含了很多方法，其中一个方法就是。通过的响应头获取到文件名。接下来就是对标签的一系列操作，然后模拟点击事件触发下载动作。距离上次博文更新已经快一个月了，期间忙于各种事情无法脱身。今天难得闲暇 and then 就来更新啦...上篇中我们了解了下载React中如何实现文件的上传，虽然不算什么高大上的技术但实际开发的时候...

Jacendfeng 2019-08-26 13:25 评论0 收藏0
h5唤醒APP小记

摘要：比如联系方式银行卡信用卡信息支付宝各大商城的账户密码照片甚至行程与位置信息等。针对这个问题，苹果使用了名为沙盒的机制应用只能访问它声明可能访问的资源。 h5唤醒APP功能最近遇到一个需求，需要在从APP分享出去的H5页面中，带有一个立即打开的按钮，如果本地安装了app，那么就直接唤起本地的app，如果没有安装，则跳转到下载。这是一个很正常的推广和导流量的策略。前端小白从来没有做过这个...

KnewOne 2019-08-23 16:25 评论0 收藏0
h5唤醒APP小记

摘要：比如联系方式银行卡信用卡信息支付宝各大商城的账户密码照片甚至行程与位置信息等。针对这个问题，苹果使用了名为沙盒的机制应用只能访问它声明可能访问的资源。 h5唤醒APP功能最近遇到一个需求，需要在从APP分享出去的H5页面中，带有一个立即打开的按钮，如果本地安装了app，那么就直接唤起本地的app，如果没有安装，则跳转到下载。这是一个很正常的推广和导流量的策略。前端小白从来没有做过这个...

jayzou 2019-08-02 16:09 评论0 收藏0
聊一聊H5应用缓存-Manifest

摘要：原文聊一聊应用缓存导读是提供的一种应用缓存机制基于它应用可以实现离线访问为此浏览器还提供了应用缓存的虽然的技术已被标准废弃但这不影响我们尝试去了解它也正是因为的应用缓存机制如此诱人饿了么和邮箱等都还在使用着它描述对熟悉的同学可以跳过此原文: 聊一聊H5应用缓存-Manifest 导读 Manifest 是 H5提供的一种应用缓存机制, 基于它web应用可以实现离线访问(offline...

陈伟 2019-08-06 13:22 评论0 收藏0