Как работает автоматическая загрузка с использованием BLOB-URL и программных событий кликов? - PullRequest
0 голосов
/ 07 января 2019

Мне недавно нужно было реализовать автоматическую загрузку файла CSV в javascript. Я не хотел использовать сторонние библиотеки, поэтому изучаю, как это делают сторонние библиотеки. Я взглянул на пакет FileSaver npm специально для функции saveAs из здесь .

Со временем я изменил код в соответствии со своими потребностями на что-то вроде этого:

class BlobDownload {
  constructor(window, blob, fileName, contentType) {
    this.window = window;
    this.document = window.document;
    this.blob = blob;
    this.fileName = fileName;
    this.contentType = contentType;
  }

  asyncCreateObjectURL = blob => {
    return new Promise((resolve, reject) => {
      const blobURL = this.window.URL.createObjectURL(blob);
      blobURL ? resolve(blobURL) : reject();
    });
  }

  click = (node) => {
    try {
      node.dispatchEvent(new MouseEvent('click'));
    } catch (e) {
      const evt = this.document.createEvent('MouseEvents');
      evt.initMouseEvent('click', true, true, this.window, 0, 0, 0, 80,
        20, false, false, false, false, 0, null);
      node.dispatchEvent(evt);
    }
  };

  download = async () => {
    const blob = new Blob([this.blob], { type: this.contentType });
    const a = this.document.createElement('a');
    a.download = this.fileName;
    a.href = await this.asyncCreateObjectURL(blob);
    setTimeout(() => { this.window.URL.revokeObjectURL(a.href) }, 60000) // 1min
    setTimeout(() => { this.click(a) }, 0)
  }
}

export default BlobDownload;

Я не понимаю несколько вещей в коде:

  1. мы создаем a узел, но он нигде не отображается на странице. Где этот узел фактически находится, только как объект в оперативной памяти?
  2. функция click немедленно отправила событие click, но если это не сработало, оно создает новое событие, а затем отправляет его. Почему мы должны учитывать случай, когда простая диспетчеризация не работает?
  3. вся процедура создания временной a ссылки и искусственного нажатия на нее выглядит как хак. Это действительно хороший шаблон или существуют лучшие практики для загрузки файлов?
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...