Кращий спосіб завантаження файлів в javascript, pixels commander

Як правило в HTML середовищі використовуються два шляхи виклику завантаження. window.open і клік по посиланню на файл. Кожен із способів за своїм ущербний. У пошуку універсальної техніки було знайдено кілька цікавих рішень, всі разом вони складають кращий метод для скачування файлів з JS.

Почнемо з простого методу завантаження файлу через window.open:

Ця функція буде працювати скрізь, але з низкою недоліків:

  • У Chrome і Safari після спрацьовування залишиться порожнє вікно;
  • Якщо content-type файлу передбачає відкриття то файл не скочується, а відобразиться у вікні.

Що ж ми можемо зробити?

Аргумент «_self» для window.open

Прибрати настирливе вікно в Chrome і Safari можна додавши аргумент «_self» до window.open:

Клік по посиланню так само не викликає згаданої вище проблеми з порожнім вікном і хоч клік - операція користувача, нам ніхто не заважає створити віртуальну посилання і віртуально по ній клікнути згенерувавши подія миші.

Додамо код віртуального клацання для хрому і сафарі, залишаючи за кадром банальне визначення браузера:

HTML5 аттрибут download і ігнорування content-type Що ще може викликати роздратування користувача? Наприклад ситуація, коли при завантаженні HTML або PNG файлу він відкривається в браузері. Цього можна уникнути Додати до нашого віртуального лінку аттрибут download. який з'явився в HTML5 і служить для вказівки браузеру на «викачує» характер посилання. Значення атрибута - це підсумкове ім'я викачуваного файлу, а href - вихідний URL. Підсумковий код модуля download.js:

Схожі статті