根据caniuse，Microsoft Edge build 10547+支持element的download属性，但不支持 IE 或 Safari。<a>
如何在不使用<a>具有download属性集的元素或服务器的情况下下载文件对象？
如何在不使用具有下载属性或服务器的 <a> 元素的情况下下载文件？
IT技术
javascript
html
file
download
fileapi
2021-02-07 03:52:14
6个回答
有多种方法可以触发下载。以下是一些：
使用表格：
<form method="get" action="mydoc.doc">
<button type="submit">Download</button>
</form>
使用 JavaScript：
<button type="submit" onclick="window.open('mydoc.doc')">Download</button>
虽然我支持@LeoFarmer 的回答，但我想提供两种“可破解”的方法：
如果文件非常小，您可以使用
a与href='data:[<mediatype>][;base64],<data>'。这可以允许您在 中添加内容处置
mediatype，模拟 HTTP 标头。这种 hack 也不像人们希望的那样便携。对于中小型文件，可以使用 AJAX 下载文件，然后使用 Javascript File API 提示保存文件（该 API 不支持保存，但很容易将数据转换为数据 URL）。
如果您想避免使用 Javascript File API，您可以尝试模拟锚点点击，如此处建议的那样。
同样，正如 Leo Farmer 所指出的，这些解决方案不能保证浏览器不会在新选项卡中打开文件而不是将其保存到磁盘，但我认为可以肯定地说所有用户都可以优雅地降级为 acmd+S或ctrl+S键盘快捷键:-)
您可以使用下载属性和 jquery 来执行此操作。下载属性在 ie 和 safari/ios 中不支持。所以你可以使用 jquery 来做到这一点
$('.download').click(function(e) {
e.preventDefault(); //stop the browser from following
window.location.href = 'uploads/file.doc';
});
<a href="no-script.html" class="download">Download</a>
您可以使用手动创建的文件表示，也可以使用, ,类型设置为, ,data URI data:[<mediatype>][;base64],<data>FileReader().readAsDataURL()MIMEapplication/octet-streamencodeURIComponent()window.open()
<script>
var file = "data:application/octet-stream,"
+ encodeURIComponent("<!DOCTYPE html>"
+ "<html><body>"
+ "<div>abc</div>"
+ "</body></html>");
var saveFile = window.open(file, "_self");
</script>
<script>
var blob = new Blob(["abc"], {type:"text/plain"});
var reader = new FileReader();
reader.addEventListener("load", function(e) {
// replace existing `MIME` type with `application/octet-stream`
var file = "data:application/octet-stream;"
+ e.target.result.split(/;/)[1];
var saveFile = window.open(file, "_self");
});
reader.readAsDataURL(blob)
</script>
其它你可能感兴趣的问题