前端文件下载时重命名文件名
JavaScript HTML 跨域 大约 2175 字a 标签
使用a
标签的download
属性可重命名文件名。但必须是同源,在跨域的网页中无法重命名。
<a href="https://xxx.com/pic.jpg" download="test.jpg">download</a>
js 实现
对于跨域的下载,可使用js
实现。但如果文件服务器有限制跨域,还需后端解除限制。
<a href="javascript:void(0)" onclick="fileDownload('url','name')>download</a>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer">
<title>Title</title>
<script>
/**
* 下载
* @param {String} url 目标文件地址
* @param {String} filename 想要保存的文件名称
*/
function fileDownload(url, filename) {
getBlob(url, function(blob) {
saveAs(blob, filename);
})
}
function getBlob(url,cb) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) {
cb(xhr.response);
}
};
xhr.send();
}
/**
* 保存
* @param {Blob} blob
* @param {String} filename 想要保存的文件名称
*/
function saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
var link = document.createElement('a');
var 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);
}
}
</script>
</head>
<body>
<a referrerPolicy="no-referrer" href="javascript:void(0)" onclick="fileDownload('https://xxx.com/pic.jpg','ccc.jpg')">download</a>
<br>
<a href="https://xxx.com/pic.jpg" download="test.jpg">download2</a>
</body>
</html>
阅读 6104 · 发布于 2020-09-18
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
Java 11 在容器中无法获取正确的 CPU 处理器个数阅读 326
-
Java 语法糖 - 泛型擦除阅读 1169
-
macOS 访达中打开 usr 或隐藏目录阅读 286
-
MySQL 规约阅读 3855
-
Notepad++ 保存 Ctrl-S 显示 DC3 ,搜索 Ctrl-F 显示 ACK 解决办法阅读 7276
-
OpenResty 解析 JSON 中的 null 字段时问题阅读 2591
-
IDEA 根据 URL 快速定位 Controller 类快捷键阅读 1694
-
面试题:HashMap 和 Hashtable 的区别阅读 2101
-
Spring Boot 3 使用 Spring Native 构建二进制可执行文件阅读 961
-
JMeter 记录 Cookie 保持登录状态阅读 2444