JavaScript: декодирование строки в Base64

Вообще штатно есть функции для кодирования/декодирования: atob / btoa. Но один нюанс: если строчку вида «Hello world!» они кодирую-декодируют легко, то с бинарными файлами выйдет ой. Не, они конечно тоже что-то сделают, но с «тихой ошибкой» — т.е. результат будет, но не верен. Попался так, когда с сервера передавал файл в base64 на клиент javascript, декодировал его примерно так:

А в результате, с виду вроде бы валидный файл, экселем открываться отказался. А всё потому, что atob не работает со строками в Uicode. Потому обычно используют следующие обертки для кодирования-декодирования:

JavaScript: Еще один вариант загрузки файла по клику на кнопку

Общая идея следующая: по клику на кнопку вызываем AJAX запрос на сервер с определенными параметрами передаваемыми в POST, затем получив в результат запроса файл — формируем в DOM на файл в формате blob, и тут-же её нажимаем. В результате браузер показывает диалоговое окно сохранения файла.

Таким необычным способом мы убиваем несколько зайцев сразу:

  1. Получаем возможность показать ошибку, если вдруг файл на сервере сформировать не удалось. Это полезно если например файл формируется на сервере «на лету» — например файл XLSX с отчётом
  2. Мы можем передать серверу какие-то условия для формирования файла в POST запросе
  3. На странице мы не размещаем заранее данные в тегах <form></form>, как практикуется в подобных решениях
  4. Пользователю достаточно нажать на кнопку один раз для получения результата.

В результате скрипт формирования файла может выглядеть примерно следующим образом:

На клиенте:

На сервере:

Yandex map: динамическая загрузка содержимого балуна

Задача: динамически загружать контент по клику на метку, в т.ч. и при кластеризации

Решение:

Добавим события открытия балуна по клике на метку из карты и кластера:

К сожалению, если в кластере собрано очень много меток (более 200), то обновление идёт довольно долго, потому пришлось немножко ограничить загрузку. В хорошем варианте, нужно бы отслеживать клик по заголовку списка в кластере, но это пока не удалось

Синхронный запрос через fetch

Да, знаю, плохо, отвратительно и всё такое. Но иногда нужно. Например мне понадобилось при написании Service Worker, для возможности подмены запрашиваемого для загрузки url.. Реализовал так:

JavaScript: перехват всех http/https запросов страницы

Прилетела задача перехватить URL всех загрузок тайлов на странице с размещенной Яндекс картой. В принципе если бы был простой случай, то всё решилось бы созданием прототипа для функции XMLHttpRequest , что-то в духе:

Но возник один нюанс, карта располагается в iframe, а прототипы «вниз» не распространяются. Единственным способом осталось написать сервис Service Worker, который будет отлавливать все запросы..

На странице добавляем функцию загрузки сервиса:

Далее в sw.js добавим слушательсобытия fetch, и реализацию отправки перехваченых url на сервер:

Серверная часть woodpecker.php:

В результате в файл url.txt на сервере пишутся все запрошенные url.

Отладка сервиса в FireFox возможна на вкладке about:debugging#/runtime/this-firefox, ищем там свой сервис, нажимаем «исследовать»

1 2 3 11