在 EmberJs 中下载 CSV 文件答案

【问题标题】：Download a CSV file in EmberJs在 EmberJs 中下载 CSV 文件
【发布时间】：2016-08-26 01:05:00
【问题描述】：

我尝试了无数不同的函数调用，但似乎无法弄清楚如何在 EmberJs 中触发 CSV 的下载。

这是我最新的代码：

let endpoint = '/api/foo/';
let options = {
    url: endpoint,
    type: 'POST',
    data: {},
    dataType: 'text'
};
return new Ember.RSVP.Promise((resolve, reject) => {
  options.success = function(result) {
      var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(result);
      window.open(uri, 'foo.csv');
  };
  options.error = (xhr, errorThrown) => {
    console.log('error');
    // return Ember.run(null, reject, this.didError(xhr, xhr.status, xhr.responseJSON, 1));
  };
  Ember.$.ajax(options);
});

此代码不会引发任何服务器或客户端错误。它得到了 200 个响应。没有 javascript 错误，也没有控制台记录任何内容，所以我知道它没有遇到错误块。但是......它不会触发客户端上的文件下载。有谁知道缺少什么？

【问题讨论】：

您的请求有什么特别之处，还是只是一个简单的 url 调用？我正在使用操作 {{action "downloadOrdersCSV"}} 来调用 downloadOrdersCSV:function(){window.open("yoururl",'_blank');}

标签： javascript ajax csv ember.js

【解决方案1】：

我无法对此进行测试，但我相信您的问题在于返回 new 承诺，而您真正想要的是返回承诺本身。

所以把你的代码改成：

let endpoint = '/api/foo/';
let options = {
    url: endpoint,
    type: 'POST',
    data: {},
    dataType: 'text'
};
return Ember.RSVP.Promise((resolve, reject) => {  // note the deletion of new
  options.success = function(result) {
      var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(result);
      window.open(uri, 'foo.csv');
  };
  options.error = (xhr, errorThrown) => {
    console.log('error');
    // return Ember.run(null, reject, this.didError(xhr, xhr.status, xhr.responseJSON, 1));
  };
  Ember.$.ajax(options);
});

【讨论】：

【解决方案2】：

在实现类似的功能时，我选择了不同的路线。我没有创建 AJAX 请求，而是创建了一个表单并将其提交到服务器。然后，我的 API 端点将在响应中返回 CSV，并带有适当的 Content-Disposition 标头，并且浏览器只会下载该文件。

（根据您的身份验证方案，您可能必须将身份验证令牌作为值包含在表单数据中）。

下面的示例代码。你会看到我正在添加身份验证令牌。表单的操作 URL 在页面的标记中设置，但您可以根据需要在此处动态设置。

csvDownload () {
    let form = Ember.$('#csvdownloadform')
    let input = Ember.$('#csvdownloadtoken')
    input.val(this.get('session').get('session.content.authenticated.token'))
    form.submit()
    input.val('')
    form_func.val('')
},

【讨论】：