JavaScript 实现文件下载并重命名
2024-10-17 21:14:48
第一种是HTML官网中的方法
<a href="/images/liang.jpg" download="文件名称">
HTML5 中a
标签提供了一个filename
属性,可以下载成指定的download
属性名称
这种同源访问是没有问题的,但一跨域就不行了,试了其它方法,不是报跨域错误,就是在当前页面打开文件,体验相当不好。 第二种方案比较通用/**
* 获取 blob
* url 目标文件地址
*/
function getBlob(url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest(); xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
}; xhr.send();
});
} /**
* 保存 blob
* filename 想要保存的文件名称
*/
function saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
const link = document.createElement('a');
const body = document.querySelector('body');
link.href = window.URL.createObjectURL(blob);
link.download = filename; // fix Firefox
link.style.display = 'none';
body.appendChild(link); link.click();
body.removeChild(link); window.URL.revokeObjectURL(link.href);
}
} /**
* 下载
* @param {String} url 目标文件地址
* @param {String} filename 想要保存的文件名称
*/
function download(url, filename) {
getBlob(url).then(blob => {
saveAs(blob, filename);
});
}
最新文章
- MAC OS X El CAPITAN 搭建SPRING MVC (1)- 目录、包名、创建web.xml
- Nodejs:Path对象
- 2015年12月02日 GitHub入门学习(四)Git操作
- Java网络通信初步认知
- Flume-NG内置计数器(监控)源码级分析
- Java迭代 : Iterator和Iterable接口
- 关于Python中数据对象的可变性
- 重学《C#高级编程》(对象与类型)
- 新安装ubuntu后几项配置
- hdu 1829 A Bug&#39;s Life(并查集)
- CentOS修复“OpenSSL Heartbleed漏洞”方法
- 【操作教程】利用YCSB测试巨杉数据库性能
- HDU 6043 KazaQ&#39;s Socks (规律)
- Oracle-一个中文汉字占几个字节?
- jquery的attr()方法
- Docker 实战(二)——centos7镜像安装nginx,将安装nginx的centos容器生成新的镜像,并导出
- Git多个SSH KEYS解决方案(含windows自动化、TortoiseGit、SourceTree等)
- flask与数据库连接相关操作
- 作为一名GIS从业人员,这些网站你应该关注
- Ubuntu 16.04下docker ce的安装