使用 Ember 应用程序下载文件答案

【问题标题】：Downloading files with Ember app使用 Ember 应用程序下载文件
【发布时间】：2014-11-19 15:27:24
【问题描述】：

我有 Ember 应用程序（使用 Ember-CLI 构建）。在后端，我有处理请求的 Rails 应用程序。假设我的 API 有以下路由：

/model — 返回模型列表

/model/1 — 返回模型

/model/1/download — 返回文件

如何强制 Ember 应用开始文件下载（使用 /download 路径）以及如何在 Ember 应用中构建文件下载链接？

【问题讨论】：

标签： ember.js

【解决方案1】：

您为什么不直接在“/model/1”的模型中返回下载的 URL 路径。然后，您可以轻松地在车把模板中创建链接，如下所示：

<a href="{{model.download}}" target="_blank">Download File</a>

【讨论】：

如果要下载的文件来自Ember的后端，我认为它不能像这样工作。这只会打开一个显示 Ember 应用程序的新窗口，其中包含与文件 URI 对应的路由，可能不匹配。

【解决方案2】：

如果您要访问端点并返回文件内容，我相信您需要设置 Content Disposition 标头。更多详情：Force download through js or query

Content-disposition=attachment; filename=some.file.name

如果您直接链接到文件，您可以使用 HTML5 download 属性；

<a href="{{model.download}}" download>Download File</a>

【讨论】：

download 属性不太支持：caniuse.com/#feat=download
对于任何偶然发现这一点的人，html 下载属性现在有 96% 的浏览器支持，所以 Yuri 的评论不再有效。
我同意你的看法@BrandenSilva。当前所有浏览器都提供强大的支持。

【解决方案3】：

不要手动执行任何这些操作，保持简单并使用ember-cli-file-saver！

// models/invoice.js
export default Model.extend({
  invoiceNumber: attr('number'),

  download: memberAction({ path: 'download', type: 'GET', ajaxOptions: { arraybuffer: true } })
});

// in a component
invoiceModel
  .download()
  .then((pdfContent) => this.saveFileAs('invoice.pdf', pdfContent, 'application/pdf'));

【讨论】：