【问题标题】：How to download a file without using <a> element with download attribute or a server?如何在不使用具有下载属性或服务器的 <a> 元素的情况下下载文件？
【发布时间】：2016-12-07 07:10:03
【问题描述】：

根据caniuse <a>元素的download属性Microsoft Edge build 10547+支持，但not IE or Safari。

如何在不使用带有download 属性集的<a> 元素或服务器的情况下下载文件对象？

【问题讨论】：

你可以在这里查看我的答案：stackoverflow.com/questions/38524320/… 它提供了你正在寻找的东西。
@Dekel 请参阅 OP 的标准，.responseType 在浏览器开发时尚未定义。
您在寻找兼容 2016 浏览器还是 2017 的解决方案？ :)
@Dekel 事后不会尝试更改原始问题的上下文。请参阅How to create an ArrayBuffer and data URI from Blob and File objects without FileReader?，其中发布了不符合原始标准的答案，尽管提供了解决方案，但 Kaiido 准确地指出了适当的上下文。
没有“服务器”是什么意思？

标签： javascript html file download fileapi

【解决方案1】：

有多种触发下载的方法。以下是一些：

使用表格：

<form method="get" action="mydoc.doc">
<button type="submit">Download</button>
</form>

使用javascript：

<button type="submit" onclick="window.open('mydoc.doc')">Download</button>

【讨论】：

如果用户有打开 mydoc.doc 的浏览器插件怎么办？那么怎么下载呢？
用户可以选择保存他们通过浏览器插件看到的内容。但是，您不能从前端强制下载。看到这个：stackoverflow.com/questions/8613725/…

【解决方案2】：

虽然我支持@LeoFarmer 的回答，但我想提供两种“可破解”的方法：

如果文件非常小，可以使用a 和href='data:[<mediatype>][;base64],<data>'。

这可以让您在 mediatype 中添加内容处置，模拟 HTTP 标头。这种 hack 也没有人们希望的那么便携。
对于中小型文件，可以使用 AJAX 下载文件，然后use the Javascript File API to prompt for file saving（API 不支持保存，但很容易将数据转换为数据 URL）。

如果您想避免使用 Javascript File API，可以尝试模拟锚点点击，如 suggested here。

再一次，正如 Leo Farmer 所指出的，这些解决方案不能保证浏览器不会在新选项卡中打开文件而是将其保存到磁盘，但我认为可以肯定地说所有用户都会能够优雅地降级为cmd+S 或ctrl+S 键盘快捷键:-)

【讨论】：

【解决方案3】：

您可以同时使用下载属性和 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>

【讨论】：

【解决方案4】：

使用FileSaver.js

它支持所有常用的浏览器。

只需包括：

<script type="text/javascript" src="FileSaver.min.js"></script>

并像这样使用它：

var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
saveAs(file);

注意： 要使其在 Safari Blob.js 作为依赖项。

【讨论】：

答案最后一句提到的浏览器是否有File构造函数？
不，他们没有。 (caniuse.com/#search=File) 但是看看 FileSaver.js 的文档，还有其他的保存方式。我希望你会发现它有帮助。 :)

【解决方案5】：

您可以使用data URIdata:[<mediatype>][;base64],<data> 表示文件，手动创建或使用FileReader()、.readAsDataURL()，将MIME 类型设置为application/octet-stream、encodeURIComponent()、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>

plnkr http://plnkr.co/edit/IS1OC0laRwL3BuuF9zay?p=preview

【讨论】：

【解决方案6】：

如果您使用的是服务器端，请按照表单提交机制来呈现页面。在 MVC 中我们可以使用下面的代码

HTML

  @using (Html.BeginForm("GetAttachment", "User", FormMethod.Post))
                {

                    <button type="submit">Download</button>   
                }

MVC 控制器

public ActionResult GetAttachment()
{
   string filename = "File.pdf";
string filepath = AppDomain.CurrentDomain.BaseDirectory + "/Path/To/File/" + filename;
byte[] filedata = System.IO.File.ReadAllBytes(filepath);
string contentType = MimeMapping.GetMimeMapping(filepath);

var cd = new System.Net.Mime.ContentDisposition
{
    FileName = filename,
    Inline = true,
};

Response.AppendHeader("Content-Disposition", cd.ToString());

return File(filedata, contentType);
}

【讨论】：

"不使用带有下载属性的<a> 元素或服务器？"
使用表单将数据提交到服务器，服务器返回文件。
<form> 不需要提交到服务器。 Question的要求是不使用服务器
不确定您的意思？
为什么需要 jQuery 插件？