前端文件下载时重命名文件名
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>
阅读 5039 · 发布于 2020-09-18
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
Golang 操作 MySQL 数据库阅读 1860
-
Gradle 生成 gradlew 设置版本及属性阅读 4797
-
minikube 安装 Kubernetes ingress 插件报错 timed out waiting for the condition阅读 412
-
设计模式之外观模式阅读 1498
-
MySQL 数据类型及占用字节数阅读 3195
-
Spring AOP 原理阅读 853
-
排序算法阅读 741
-
Linux 命令之 Vim 显示行号阅读 1728
-
Prometheus+Grafana+rabbitmq_prometheus 监控 RabbitMQ阅读 1069
-
PostgreSQL distinct 和 distinct on 区别阅读 1298