JavaScript 实现文件下载并重命名
第一种是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);
});
}
JavaScript 实现文件下载并重命名的更多相关文章
- 纯js实现文件下载并重命名功能
直接记录代码: /** * 获取 blob * @param {String} url 目标文件地址 * @return {cb} */ function getBlob(url,cb) { var ...
- JavaScript多文件下载
对于文件的下载,可以说是一个十分常见的话题,前端的很多项目中都会有这样的需求,比如 highChart 统计图的导出,在线图片编辑中的图片保存,在线代码编辑的代码导出等等.而很多时候,我们只给了一个链 ...
- JAVA 批量下载服务器文件到本地指定文件夹并重命名
/** * @功能 下载文件到指定文件夹并重命名 * @param url 请求的路径 * @param filePath 文件将要保存的目录 * @param filename 保存到本地的文件名 ...
- scp 对拷文件夹 和 文件夹下的所有文件 对拷文件并重命名
对拷文件夹 (包括文件夹本身) scp -r /home/wwwroot/www/charts/util root@192.168.1.65:/home/wwwroot/limesurvey_ba ...
- Python复制指定目录的各个子目录下的同名文件到指定文件夹并重命名
Python复制指定目录的各个子目录下的同名文件到指定文件夹并重命名 #编码类型 #-*- coding: UTF-8 -*- #导入包 import os import shutil srcpath ...
- javascript中的function命名空間與模擬getter、setter
function的命名空間 在javascript中,function也可以擁有自己的命名空間例如以下這段程式碼: 12345678 function () { return 'I am A';} A ...
- JavaScript知识点总结(命名规范,变量的作用域)
命名规范 有人说JavaScript的宽容性是这个语言最糟糕的方面之一.比如说想把2个数字加在一起,JavaScript会把其中一个数字解析成字符串,那么就会得到一个奇怪的字符串,而不是2个数字的和. ...
- JavaScript 中的变量命名方法
三种命名方法 在程序语言中,通常使用的变量命名方法有三种:骆驼命名法(CamelCase),帕斯卡命名法(PascalCase)和匈牙利命名法. 依靠单词的大小写拼写复合词的做法,叫做"骆驼 ...
- JavaScript中标识符的命名
JavaScript中的标识符的命名有以下规则: 由字母.数字.$._组成 以字母.$._开头 不可以使用保留字!!! 要有意义!!!!!!! 标识符的命名规范: 1.驼峰命名法 除标识符的第一个单词 ...
随机推荐
- Power BI 报表服务器中的行级别安全性 (RLS)
在 Power BI Desktop 中定义角色和规则 你可以在 Power BI Desktop 中定义角色和规则. 发布到 Power BI 时,它还会发布角色定义. 若要定义安全角色,请执行以下 ...
- C#面向对象19 值传递和引用传递
值类型:int double char decimal bool enum struct引用类型:string 数组 自定义类 集合 object 接口 **值传递和引用传递1.值类型在复制的时候,传 ...
- 小白学 Python 爬虫(25):爬取股票信息
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...
- JavaScript笔记(3)
字典(Array对象) Array对象当字典使用时,.length属性就不能使用了 如果想访问对象元素,不能使用索引,只能使用key 如果遍历字典,只能使用for--in语句 字典是另一种可变容器模型 ...
- 【Git的基本操作九】ssh免密登录
SSH免密登录 1. 进入用户家目录 cd ~ 2. 删除原有的 .ssh 目录 rm -r .ssh 3. 运行命令生成 .ssh 目录 ssh-keygen -t rsa -C github或gi ...
- Linux系统介绍及部署
Linux系统介绍及部署1.常见操作系统 windows.Linux(类unix系统).Android.iOS.unix(HP UNIX)2.操作系统构成 外壳(shell)+驱动+内核3.常见Lin ...
- 1 .net将xml反序列化
public static T XmlToObject<T>(string str) where T : class { using (Stream stream = new Memory ...
- ubuntu - 14.10,解决按照最新版Gnome 15.10后,经典Gnome桌面字体问题!
ubuntu14.10刚安装完毕,我首先按照了经典Gnome桌面,随后我发现ubuntu软件中心里面能找到的软件明显不如先前我安装过的ubuntu了,我觉得有可能是因为我以前安装的ubuntu14.1 ...
- Delphi BuildCommDCBAndTimeouts函数
- MacOs上的Intellij idea高频快捷键总结(2018.1版本)
高频快捷键 查找类快捷键 command + F12 查看当前类方法变量 command + E 查看最近文件 Alt+F1 ...