前端文件下载时重命名文件名
JavaScriptHTML大约 2172 字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>阅读 112 · 发布于 2020-09-18
———— END ————
扫描下方二维码关注公众号和小程序↓↓↓
昵称：