Архивы javascript

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

09.07.2025 Павел Грибов WEB

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

let a = document.createElement("a");
let file = new Blob([atob(data.result)], {type: 'application/xlsx'});
a.href = URL.createObjectURL(file);
a.download = "template_0.xlsx";
a.click();

let a = document.createElement("a");

let file = new Blob([atob(data.result)], {type: 'application/xlsx'});

a.href = URL.createObjectURL(file);

a.download = "template_0.xlsx";

a.click();

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

function base64ToBytes(base64) {
  const binString = atob(base64);
  return Uint8Array.from(binString, (m) => m.codePointAt(0));
}
function bytesToBase64(bytes) {
  const binString = String.fromCodePoint(...bytes);
  return btoa(binString);
}

function base64ToBytes(base64) {

const binString = atob(base64);

return Uint8Array.from(binString, (m) => m.codePointAt(0));

}

function bytesToBase64(bytes) {

const binString = String.fromCodePoint(...bytes);

return btoa(binString);

}

Оставить комментарий base64, javascript, unicode, utf8, деокдирование, юникод

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

26.11.2024 Павел Грибов WEB

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

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

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

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

На клиенте:

/**
 * Формирование отчета
 * @param {type} filename - имя файла на сервере для формирования отчета
 * @param {type} ext - выходное расширение (например xlsx,csv)
 * @returns {Number}
 */
function get_report(filename,ext){
        $("#global").addClass("loading");    
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '?r=reports/'+filename, true);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.responseType = 'blob';     
        xhr.onload = function(e) {
            $("#global").removeClass("loading");    
            if (this.status == 200) {
                var link=document.createElement('a');
                link.href=window.URL.createObjectURL(this.response);                
                console.log("Расширение:"+ext);
                link.download="report."+ext;
                link.click();
            }
            else {
                console.log(e);
                ToastMessage("error","Произошла ошибка при формировании файла. Попробуйте позднее или обратитесь к администратору системы.");
            }
        };     
        var form_data = new Map();
        form_data.period_from = period_from.value;
        form_data.period_to = period_to.value;
        form_data.area = area_select.value;
        form_data.division_check=division_check.checked;
        form_data.period_check=period_check.checked;
        xhr.send(mapToQueryString(form_data));                                          
};

/**

* Формирование отчета

* @param {type} filename - имя файла на сервере для формирования отчета

* @param {type} ext - выходное расширение (например xlsx,csv)

* @returns {Number}

function get_report(filename,ext){

$("#global").addClass("loading");

var xhr = new XMLHttpRequest();

xhr.open('POST', '?r=reports/'+filename, true);

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

xhr.responseType = 'blob';

xhr.onload = function(e) {

$("#global").removeClass("loading");

if (this.status == 200) {

var link=document.createElement('a');

link.href=window.URL.createObjectURL(this.response);

console.log("Расширение:"+ext);

link.download="report."+ext;

link.click();

}

else {

console.log(e);

ToastMessage("error","Произошла ошибка при формировании файла. Попробуйте позднее или обратитесь к администратору системы.");

}

};

var form_data = new Map();

form_data.period_from = period_from.value;

form_data.period_to = period_to.value;

form_data.area = area_select.value;

form_data.division_check=division_check.checked;

form_data.period_check=period_check.checked;

xhr.send(mapToQueryString(form_data));

};

На сервере:

    public function actionGet_report_by_settlers(){               
       $request = Yii::$app->request;      
       $area= $request->post("area");
       $dir=Yii::$app->basePath."/web/templates";
        
      $oSpreadsheet = IOFactory::load($dir . "/report_1_1.xlsx");
      ...
      формируем файл эксель
      ...
      $oWriter = IOFactory::createWriter($oSpreadsheet, 'Xlsx');
      $oWriter->save('php://output');      
    };

public function actionGet_report_by_settlers(){

$request = Yii::$app->request;

$area= $request->post("area");

$dir=Yii::$app->basePath."/web/templates";

$oSpreadsheet = IOFactory::load($dir . "/report_1_1.xlsx");

...

формируем файл эксель

...

$oWriter = IOFactory::createWriter($oSpreadsheet, 'Xlsx');

$oWriter->save('php://output');

};

Оставить комментарий javascript, сохранение файла

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

12.12.2023 Павел Грибов WEB

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

Решение:

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

                objectManager.objects.events.add('balloonopen', function (e) {
                    console.log("Открыт балун вне кластера");
                    var id = e.get('objectId'),
                    geoObject = objectManager.objects.getById(id);
                    downloadContent([geoObject], id);
                });          

                objectManager.clusters.events.add('balloonopen', function (e) {
                    var id = e.get('objectId'),
                        cluster = objectManager.clusters.getById(id),
                        geoObjects = cluster.properties.geoObjects;
                        console.log("Открыт балун из кластера..");
                        downloadContent(geoObjects, id, true);
                });   
....
function downloadContent(obj,id,isCluster){    
    console.log("Загружаем объект:");
    aids = obj.map(function (geoObject) {return geoObject.id;});
    if ((obj.length)<200) {
        $("#global").addClass("loading");   
            $.post("?r=inications/get_points_content", {  
            ids:aids,
        }).done(function(data) {            
            obj.forEach(function (geoObject) {
              //console.log("--присваиваем новое тело балуна");                
              if (geoObject.properties.balloonContentBody.includes("<l></l>")){
                //console.log("-подменяю содержимое балуна!");  
                //console.log(geoObject);
                geoObject.properties.balloonContentBody =geoObject.properties.balloonContentBody.replace("<l></l>",data.result[geoObject.id].content);      
                if (isCluster!==true){
                    objectManager.objects.balloon.setData(objectManager.objects.balloon.getData());
                } else {
                    objectManager.clusters.balloon.setData(objectManager.clusters.balloon.getData());
                };
                //setNewData();
              }            
            });                   
            $("#global").removeClass("loading");                    
        });
    } else {
     ToastMessage("error","Кластер слишком велик","Кластер слишком велик для того чтобы его раскрыть. Увеличьте масштаб и попробуйте снова!",6000);   
    };
}

objectManager.objects.events.add('balloonopen', function (e) {

console.log("Открыт балун вне кластера");

var id = e.get('objectId'),

geoObject = objectManager.objects.getById(id);

downloadContent([geoObject], id);

});

objectManager.clusters.events.add('balloonopen', function (e) {

var id = e.get('objectId'),

cluster = objectManager.clusters.getById(id),

geoObjects = cluster.properties.geoObjects;

console.log("Открыт балун из кластера..");

downloadContent(geoObjects, id, true);

});

....

function downloadContent(obj,id,isCluster){

console.log("Загружаем объект:");

aids = obj.map(function (geoObject) {return geoObject.id;});

if ((obj.length)<200) {

$("#global").addClass("loading");

$.post("?r=inications/get_points_content", {

ids:aids,

}).done(function(data) {

obj.forEach(function (geoObject) {

//console.log("--присваиваем новое тело балуна");

if (geoObject.properties.balloonContentBody.includes("<l></l>")){

//console.log("-подменяю содержимое балуна!");

//console.log(geoObject);

geoObject.properties.balloonContentBody =geoObject.properties.balloonContentBody.replace("<l></l>",data.result[geoObject.id].content);

if (isCluster!==true){

objectManager.objects.balloon.setData(objectManager.objects.balloon.getData());

} else {

objectManager.clusters.balloon.setData(objectManager.clusters.balloon.getData());

};

//setNewData();

}

});

$("#global").removeClass("loading");

});

} else {

ToastMessage("error","Кластер слишком велик","Кластер слишком велик для того чтобы его раскрыть. Увеличьте масштаб и попробуйте снова!",6000);

};

}

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

Оставить комментарий javascript, maps, yandex, динамическая загрузка

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

06.09.2023 Павел Грибов WEB

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

self.addEventListener('fetch', (event) => {    
    console.log('Запрашиваем URL: '+event.request.url);    
    (async () => {
        res=await postData("woodpecker.php", { "url": event.request.url});
    })();
    console.log("--получили ответ");
    if (res.error===false){
        console.log("Отдаём URL");
        if ( event.request.url.endsWith( '.png' ) ) {
           return event.respondWith(
             fetch( 'm.jpg' )
           );
         }        
    } else {
        return event;
    };
            
});

async function postData(url = "", data = {}) {
   console.log("-отправляем в "+url);
  // Default options are marked with *
  const response = await fetch(url, {
    method: "POST", 
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded', 
    },
    body: "data="+JSON.stringify(data), 
  });
  return await response.json();
}

self.addEventListener('fetch', (event) => {

console.log('Запрашиваем URL: '+event.request.url);

(async () => {

res=await postData("woodpecker.php", { "url": event.request.url});

})();

console.log("--получили ответ");

if (res.error===false){

console.log("Отдаём URL");

if ( event.request.url.endsWith( '.png' ) ) {

return event.respondWith(

fetch( 'm.jpg' )

);

}

} else {

return event;

};

});

async function postData(url = "", data = {}) {

console.log("-отправляем в "+url);

// Default options are marked with *

const response = await fetch(url, {

method: "POST",

headers: {

'Accept': 'application/json',

'Content-Type': 'application/x-www-form-urlencoded',

body: "data="+JSON.stringify(data),

});

return await response.json();

}

Оставить комментарий javascript, ServiceWorker, sync fetch

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

04.09.2023 Павел Грибов WEB

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

var open = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function(method, uri, async, user, pass) {
    this.addEventListener("readystatechange", function(event) {  
    if(this.readyState == 4){
       var self = this;
       var response = {
         method: method,
         uri: uri,
         responseText: self.responseText
      };
      console.log(response);  
    } else {
        console.log(this.readyState);
    }
    }, false);
  open.call(this, method, uri, async, user, pass);
};

var open = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function(method, uri, async, user, pass) {

this.addEventListener("readystatechange", function(event) {

if(this.readyState == 4){

var self = this;

var response = {

method: method,

uri: uri,

responseText: self.responseText

};

console.log(response);

} else {

console.log(this.readyState);

}

}, false);

open.call(this, method, uri, async, user, pass);

};

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

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

<script>
console.log("пробуем зарегистрировать Service Worker");    
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js',{}).then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
</script>

console.log("пробуем зарегистрировать Service Worker");

if ('serviceWorker' in navigator) {

window.addEventListener('load', function() {

navigator.serviceWorker.register('/sw.js',{}).then(function(registration) {

console.log('ServiceWorker registration successful with scope: ', registration.scope);

}, function(err) {

console.log('ServiceWorker registration failed: ', err);

});

}

</script>

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

self.addEventListener('install', (event) => {
    console.log('Установлен');
});

self.addEventListener('activate', (event) => {
    console.log('Активирован');
    self.clients.claim();
});

self.addEventListener('fetch', (event) => {    
    console.log('Запрашиваем URL: '+event.request.url);    
    postData("woodpecker.php", { "url": event.request.url}).then((data) => {
        console.log(data); 
    });
            
});


async function postData(url = "", data = {}) {
   console.log("-отправляем в "+url);
  // Default options are marked with *
  const response = await fetch(url, {
    method: "POST", 
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded', 
    },
    body: "data="+JSON.stringify(data), // body data type must match "Content-Type" header    
  });
  return await response.json(); // parses JSON response into native JavaScript objects
}

self.addEventListener('install', (event) => {

console.log('Установлен');

});

self.addEventListener('activate', (event) => {

console.log('Активирован');

self.clients.claim();

});

self.addEventListener('fetch', (event) => {

console.log('Запрашиваем URL: '+event.request.url);

postData("woodpecker.php", { "url": event.request.url}).then((data) => {

console.log(data);

});

async function postData(url = "", data = {}) {

console.log("-отправляем в "+url);

// Default options are marked with *

const response = await fetch(url, {

method: "POST",

headers: {

'Accept': 'application/json',

'Content-Type': 'application/x-www-form-urlencoded',

body: "data="+JSON.stringify(data), // body data type must match "Content-Type" header

});

return await response.json(); // parses JSON response into native JavaScript objects

}

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

<?php
$body= json_decode($_POST["data"]);

if ($body->url!=""){
    file_put_contents("urls.txt",$body->url."\n",FILE_APPEND);
}

$answer=new stdClass();
$answer->error=false;
$answer->result="ok";

echo json_encode($answer);
die();

<?php

$body= json_decode($_POST["data"]);

if ($body->url!=""){

file_put_contents("urls.txt",$body->url."\n",FILE_APPEND);

}

$answer=new stdClass();

$answer->error=false;

$answer->result="ok";

echo json_encode($answer);

die();

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

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

Оставить комментарий javascript, ServiceWorker, браузер

1 2 3 … 11 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31