Загрузка файлов в ember: с помощью Ember-cli-file-saver

С моей стороны это может быть просто незнанием, но мне удалось только загрузить файл, сгенерированный API, используя метод модели, упомянутый в документации. Используя компонент, я совершенно слеп.

Конкретный вопрос будет: где я могу упомянуть arraybuffer:true к адаптеру приложения или к пользовательскому запросу ajax? У вас есть рабочий пример?

Вот простая попытка использования сервиса ajax:

import Component from '@ember/component';
import FileSaverMixin from 'ember-cli-file-saver/mixins/file-saver';
import { inject as service } from '@ember/service';

export default Component.extend(FileSaverMixin, {
  tagName: 'div',
  ajax: service(),
  store: service(),
  click() {
    this.get('ajax').request('/excel', {
      options: {
        arraybuffer: true
      }
      }
    ).then((content) => {
      console.log(content);
      this.saveFileAs(this.get('filename'), content, this.get('contentType'));
    }).catch((error) => {
      console.log(error);
    })
  }
});

И это мой адаптер:

import DS from 'ember-data';
import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
import AdapterArrayBufferMixin from 'ember-cli-file-saver/mixins/adapter-arraybuffer-mixin';
import ENV from 'efac-front/config/environment';

export default DS.JSONAPIAdapter.extend(
  DataAdapterMixin,
  AdapterArrayBufferMixin,
  {
    authorizer: 'authorizer:token',
    namespace: 'api',
    host: ENV.host
  }
);

Я продолжаю получать ошибку SyntaxError: Unexpected token P in JSON at position 0... потому что он пытается интерпретировать буфер массива или двоичный ответ как данные json.

Я очень ценю любой свет, который вы можете пролить здесь

1 ответ

Решение

Ну, это было очень легко, но не очень хорошо задокументировано. Мне просто нужно было добавить dataType ключ к моей просьбе AJAX, как это:

this.get('ajax').request('/excel', {
      dataType: 'arraybuffer',
      options: {
        arraybuffer: true
      }
      }
    ).then((content) => {
      this.saveFileAs('reporte-asistencia.xlsx', content, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    }).catch((error) => {
      console.log(error);
    });

Это также можно сделать с dataType: 'blob',

Другие вопросы по тегам