如何从后端获取文件而不进行JSON解析

Question

我现在可以从rails后端通过对“ / companies / export_xslx”的GET请求获取xlsx文件，现在，我面临着使文件通过JSON解析器的问题。对于每个请求，控制台都会显示“ JSON.parse：JSON数据第1行第1列的意外字符”。

这是我的设置：

//company model ...
exportXlsx: function() {
  const adapter = this.store.adapterFor('company');
  return adapter.exportXlsx();
}

//adapters/company.js
import DS from 'ember-data';
import TokenAuthorizerMixin from 'ember-simple-auth-token/mixins/token-authorizer';

export default DS.JSONAPIAdapter.extend(TokenAuthorizerMixin, {

  exportXlsx() {
    const url = 'companies/export_xlsx';
    return this.ajax(url, 'GET',
      { dataType: 'text',
         accepts: { xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
       } });
  }
});

我将尝试更改默认的接受标头，但请求将通过“接受：application / vnd.api + json”发送。

我已经尝试过使用“ ember-custom-actions”或“ ember-cli-file-saver”的不同方法，它们均因JSON.parse…响应而失败。

Answer 1

我已经找到了解决方案。我通过下载服务解决了组件中的问题：

// components/companies-download.js
import Component from '@ember/component';
import { computed } from '@ember/object';
import { inject as service } from '@ember/service';

export default Component.extend({

  download: service(),

  actions: {

    downloadXlsx() {
      let url = `/companies/export_xlsx`;
      this.get('download').file(url);
    }

  }
});



// services/download.js
import Service from "@ember/service";
import { inject as service } from '@ember/service';

export default Service.extend({

  session: service(),

  file(url) {
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = () => {
      let [, fileName] = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(
        xhr.getResponseHeader("Content-Disposition")
      );
      let file = new File([xhr.response], decodeURIComponent(fileName));
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = URL.createObjectURL(file);
      link.download = file.name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    };
    xhr.open('GET', url);
    xhr.setRequestHeader(
      'Authorization',
      'Bearer ' + this.get('session.data.authenticated.token')
    );
    xhr.send();
  }
});