Мне недавно нужно было реализовать автоматическую загрузку файла 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;
Я не понимаю несколько вещей в коде:
- мы создаем
a
узел, но он нигде не отображается на странице. Где этот узел фактически находится, только как объект в оперативной памяти?
- функция
click
немедленно отправила событие click, но если это не сработало, оно создает новое событие, а затем отправляет его. Почему мы должны учитывать случай, когда простая диспетчеризация не работает?
- вся процедура создания временной
a
ссылки и искусственного нажатия на нее выглядит как хак. Это действительно хороший шаблон или существуют лучшие практики для загрузки файлов?