Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

Создание и скачивание файлов в браузере на JavaScript

01.10.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Сохранять изображения из браузера мы уже научились, теперь разберем более общий пример, когда надо создать виртуальный файл и отправить его на скачивание. Современными средствами JavaScript можно "на лету" создавать ZIP-архивы, PDF-файлы и даже некоторые форматы офисных документов. Подобное управление файлами посредством JavaScript на стороне клиента значительно повышает удобство работы, так как все манипуляции выполняются без необходимости поддерживать связь с сервером.
  1. function virtual_download (datafile_namemime_type) {
  2.     // Создать элемент Blob
  3.     var blob=new Blob([data], { typemime_type });
  4.     var url=window.URL.createObjectURL(blob);
  5.  
  6.     // Создать элемент ссылки
  7.     var link=document.createElement('a');
  8.     link.href=url;
  9.     link.download=file_name;
  10.     // Добавить элемент в DOM
  11.     document.body.appendChild(link);
  12.     // Эмуляция клика на ссылке
  13.     link.click();
  14.     // Убрать элемент из DOM
  15.     document.body.removeChild(link);
  16.     // Очистить объект Blob
  17.     setTimeout(function() {
  18.         window.URL.revokeObjectURL(url)
  19.     }, 1000);
  20. }
Параметры вызова: data - содержимое виртуального файла, file_name - имя файла, который будет передан на скачивание, и mime_type - MIME-тип файла. Скрипт автоматически создает элемент ссылки, добавляет его в DOM, настраивает у него атрибуты href с содержимым скачиваемого файла и download с указанным имени файла. После этого эмулируется клик на ссылке, что непосредственно запускает загрузку.

Читать статью целиком »
Просмотров: 543 | Комментариев: 3

Вставка изображения из буфера обмена на JavaScript

17.08.2024 | Категория: Web-мастеру и не только | Автор: ManHunter

Вставка изображения из буфера обмена на JavaScript

В интернетах популярны различные хостинги картинок, на некоторых из них есть возможность вставки изображений из буфера обмена для последующей загрузки. Это весьма интересная и полезная функция, так что мне, естественно, стало любопытно, как это делается.

Читать статью целиком »
Просмотров: 255 | Комментариев: 0

Прогрессбар с анимированным градиентом на CSS

19.07.2024 | Категория: Web-мастеру и не только | Автор: ManHunter

Прогрессбар с анимированным градиентом на CSS

Анимированный прогрессбар очень часто используется в приложениях для мобильных устройств. Но его также можно использовать и на сайтах, когда выполняется какой-то длительный процесс и надо создать у пользователя иллюзию, что приложение не зависло и что-то происходит прямо сейчас. Для анимации обычно применяется бегущий градиентный фон. Сегодня сделаем такой градиентный прогрессбар на чистом CSS, а "оживим" его с помощью JavaScript.

Читать статью целиком »
Просмотров: 175 | Комментариев: 0

Групповой выбор checkbox'ов на JavaScript

01.07.2024 | Категория: Web-мастеру и не только | Автор: ManHunter

Групповой выбор checkbox'ов на JavaScript

В некоторых пользовательских интерфейсах в рабочих проектах приходится сталкиваться с длинными таблицами. Одна из колонок в такой таблице - чекбокс, которым отмечаются строки, с которыми надо выполнить то или иное действие. При выборе пары-тройки чекбоксов проблем не возникает, один клик - один чекбокс. В шапке колонки есть мастер-чекбокс, с помощью которого можно отметить все или снять все галочки. А вот при необходимости отметить не все, но просто большое количество чекбоксов начинаются сложности. По одному делать это долго. Но ведь даже в стандартном Проводнике есть возможность выбирать последовательность файлов, отмечая чекбоксы с зажатой клавишей Shift. Такая идея мне понравилась и я перенес ее на веб-страницы.

Читать статью целиком »
Просмотров: 318 | Комментариев: 9

Хранение данных в localStorage и sessionStorage

27.06.2024 | Категория: Web-мастеру и не только | Автор: ManHunter

Хранение данных в localStorage и sessionStorage

Собрал небольшую шпаргалку по localStorage и sessionStorage в частности и Web Storage API в целом. Вся эта информация в том или ином объеме, конечно, есть в других источниках, тут она исключительно для личного удобства, чтобы долго не искать.

Читать статью целиком »
Просмотров: 433 | Комментариев: 0

prev 01 02 03 04 05 06 07 08 09 ... 15
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 3 (0.0038 сек.) / Память: 4.5 Mb
Наверх