使用h5 <a>标签 href='url' download 下载踩过的坑
用户点击下载多媒体文件(图片/视频等),最简单的方式:
<a href='url' download="filename.ext">下载</a>
如果url指向同源资源,是正常的。
如果url指向第三方资源,download会失效,表现和不使用download时一致——浏览器能打开的文件,浏览器会直接打开,不能打开的文件,会直接下载。浏览器打开的文件,可以手动下载。
解决方案一:将文件打包为.zip/.rar等浏览器不能打开的文件下载。
解决方案二:通过后端转发,后端请求第三方资源,返回给前端,前端使用file-saver等工具保存文件。
如果url指向的第三方资源配置了CORS,download依然无效,但可以通过xhr请求获取文件,然后下载到本地。
/**
* 用FileSave保存文件
* @param url
*/
export function downloadUrlFile(url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
xhr.onload = () => {
if (xhr.status === 200) {
// 获取图片blob数据并保存
saveAs(xhr.response, 'abc.jpg');
}
}; xhr.send();
} /**
* URL方式保存文件到本地
* @param name 文件名
* @param data 文件的数据
*/
function save(name, data) {
var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([data]);
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name;
_fakeClick(save_link);
}
浏览器已经限制死跨域下载多媒体文件的各种方式。
使用h5 <a>标签 href='url' download 下载踩过的坑的更多相关文章
- C# 网络编程之webBrowser获取网页url和下载网页中图片
该文章主要是通过C#网络编程的webBrowser获取网页中的url并简单的尝试瞎子啊网页中的图片,主要是为以后网络开发的基础学习.其中主要的通过应用程序结合网页知识.正则表达式实现浏览.获取url. ...
- Safari 下用 "location.href = filePath" 实现下载功能的诡异 bug
Safari 下的一些诡异 bug 我们已经领教一二,比如前文中说的 无痕浏览模式下使用 localStorage 的 API 就会报错.今天我们要讲的是利用 location.href = file ...
- H5 音频标签自定义样式修改以及添加播放控制事件
说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...
- H5新标签
1. H5新标签 语义标签: <article>定义文章</article><aside>定义文章侧边栏</aside> <figure>定 ...
- 使用隐藏form表单下载文件,解决url方式下载,由于环境问题而限制url长度,满足不了所有的需求!
一 对于某些环境导出是直接用wiondow.href=url直接导出下载,有些业务需求,如员工档案等字段比较多的时候,全选导出就会引发异常,由于Nginx转发长度限制的问题, 如果运维不愿意改变环境, ...
- IIS 配置 FTP 网站 H5 音频标签自定义样式修改以及添加播放控制事件
IIS 配置 FTP 网站 在 服务器管理器 的 Web服务器IIS 上安装 FTP 服务 在 IIS管理器 添加FTP网站 配置防火墙规则 说明:服务器环境是Windows Server 200 ...
- 利用a标签解析URL
参考资料 http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html 很多时候我们有从一个URL中提取域名,查询关键 ...
- struts2 标签 --<<s:url >
Struts2中的链接标签 <s:url>和<s:a> 普通链接 Web程序中最普通的应用是链接到其他页面,下面看Welcome.jsp. <%@ page conten ...
- Android开发之从网络URL上下载JSON数据
网络下载拉取数据中,json数据是一种格式化的xml数据,非常轻量方便,效率高,体验好等优点,下面就android中如何从给定的url下载json数据给予解析: 主要使用http请求方法,并用到Htt ...
随机推荐
- 集合TreeSet的使用
集合中的TreeSet是集合体系结构中的底层实现,是Collection的孙子,Set的儿子.TreeSet除拥有父接口的特点外,还有其自身的特点.下面就看看TreeSet的排序是怎么实现的.从它的构 ...
- NodeJS学习笔记 (27)实用工具模块-util(ok)
debuglog(section) 很有用的调试方法.可以通过 util.debuglog(name) 来创建一个调试fn,这个fn的特点是,只有在运行程序时候,声明环境变量NODE_DEBUG=na ...
- [Bug]Python3.x AttributeError: libtest.so: undefined symbol: fact
写kNN,需要在python中实现kd-tree 思考了一下,在python下写这种算法类的东西,还是十分别扭 于是希望用ctypes调用一下c++动态加载库 于是尝试实现一下 // test.cpp ...
- 钓鱼WIFI的防范
实际上,Wi-Fi接入点(AP).路由器和热点常常是高度暴露的攻击面.用户一不小心就有可能踏进攻击者设置的Wi-Fi陷阱,为企业造成信息泄露或经济损失. 如今Wi-Fi 6时代悄然到来,为高密海量无线 ...
- C# http服务器
Http 服务器搭建 1.新建一个C#控制台工程 2.复制以下代码 using System; using System.Collections.Generic; using System.Linq; ...
- JDBC连接SQL Server 2005 报错Connection refused: connect
com.microsoft.sqlserver.jdbc.SQLServerException: 通过端口 1433 连接到主机 localhost 的 TCP/IP 连接失败.错误:“Connect ...
- qt 闰年
bool QDate::isLeapYear ( int year ) [static]
- 洛谷 P2386 放苹果
P2386 放苹果 题目背景 (poj1664) 题目描述 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分发(5,1,1和1,1,5是同一种方法) 输入输出格式 输入 ...
- android-继承BaseAdapter--自己定义适配器,getView运行多次的解决方法
定义的getView运行多次的ListView布局: <ListView android:id="@+id/lv_messages" android:layout_width ...
- 免费WiFi初体验——个小白的WiFi旅程
说来羞愧,真正接触到WiFi还是在毕业后,此前自己封闭在一个人的世界,再加上外在学校的包围,我还成了个"山里"的孩子. 去年毕业了,也算是个90后,可自觉得心态过于成熟.了解外界太 ...