Как правильно закодировать в base64?

Question

[tron21]

У меня задача по закодированию данных для использования их при создании нового элемента. Код ниже (он из примера мозиллы) отлично работает, но меня смущает предупреждение о том что unescape устарел. Я пытался изменить функцию, но постоянно ловлю ошибки. Как можно выполнить такой код более современными способами?

function utf8_to_b64(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
}

Comments

[Elvis]

https://www.w3schools.com/jsref/jsref_unescape.asp

[twobomb]

Используй decodeURI вместо unescape

[tron21]

Elvis , twobomb я читал про это. Если я просто меняю unescape внутри этой функции на decodeURI или decodeURIComponent, то я получаю ошибку

[tron21]

Elvis twobomb проблема в том что у меня в тексте есть кириллица. Из-за этого происходит ошибка, к сожалению

[twobomb]

tron21, А ну так конечно, btoa использует ASCII , а в ней нет кириллицы. А unescape вообще там крокозябры выдаёт.
Вы просто не правильно используете, кодируйте так
let strA = window.btoa(encodeURIComponent(str));
Декодируйте так
str = decodeURIComponent(window.atob(strA));

[tron21]

twobomb, проблема в том что если я буду так кодировать, то уйдут некорректные данные для построения экселя. Грубо говоря если window.btoa(unescape(encodeURIComponent("текст"))) мне выдает 0YLQtdC60YHRgg== , то мне нужен способ , который бы делал и выдавал один в один тоже самое, но без использования unescape

Answer 1

[Надим]

Синхронно это можно сделать так:

var text = 'Привет, мир!';

var u8a = new TextEncoder().encode(text);

var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

var bytes = u8a, i, len = bytes.length, base64 = '';

for (i = 0; i < len; i += 3) {
	base64 += chars[bytes[i] >> 2];
	base64 += chars[((bytes[i] & 3) << 4) | (bytes[i + 1] >> 4)];
	base64 += chars[((bytes[i + 1] & 15) << 2) | (bytes[i + 2] >> 6)];
	base64 += chars[bytes[i + 2] & 63];
}

if (len % 3 === 2) {
	base64 = base64.substring(0, base64.length - 1) + '=';
}

else if (len % 3 === 1) {
	base64 = base64.substring(0, base64.length - 2) + '==';
}

console.log(base64);

Асинхронно через FileReader: https://learn.javascript.ru/file#filereader

P. S. Асинхронный способ:

var text = 'Привет, мир!';

var blob = new Blob([ text ]);

var reader = new FileReader();

reader.readAsDataURL(blob);

reader.onload = function() {
	
	var base64 = reader.result.split(',')[1];
	
	console.log(base64);
	
};

Comments

[tron21]

Извиняюсь ,но слегка не понял вашего предложения с filereader . Мне нужно закодировать строку в b64, а filereader предлагает читать и работать с Blob, а не строкой. Или я что-то не так понял?

А синхронный способ, отлично работает. Спасибо

[Надим]

tron21, асинхронный способ:

var text = 'Привет, мир!';

var blob = new Blob([ text ]);

var reader = new FileReader();

reader.readAsDataURL(blob);

reader.onload = function() {
	
	var base64 = reader.result.split(',')[1];
	
	console.log(base64);
	
};

[Надим]

tron21, правда не совсем понятно, зачем вам нужен base64? Что вы потом с ним делаете?

[tron21]

Надим Закиров, я , на основе одной библиотеки, пишу функцию по скачиванию таблицы в формат эксель. В функционале библиотеки это требуется. Как я понял ради правильной работы с данными

[Надим]

tron21, причем тут base64?

Если вам надо отдать на скачивание File или Blob, то base64 для этого НЕ нужен.

[tron21]

Надим Закиров, мне его сначала собрать нужно. У меня нет файла, я его создаю. Я отталкиваюсь от того что вижу в библиотеке , которая работает - собирает данные тега table и выдают уже excel файл с нужными данными. Внутри этой библиотеки есть подобное решение при создании element.href . Туда же, через base64 , как я понимаю кодируются данные будущего эксель файла.

Главное что ваше решение помогло. Спасибо.

[Надим]

tron21, вы не то делаете)

В element.href вставляется ссылка на скачивание.

Так называемый Data URL это лишь один способов представления ссылки. Вот, обязательно почитайте:
https://developer.mozilla.org/ru/docs/Web/HTTP/Bas...

На самом же деле для получения ссылки на скачивание вам достаточно использовать метод URL.createObjectURL:

var link = document.createElement('a');
link.download = 'Название файла.txt';

var blob = new Blob([ 'Привет, мир!' ]);

link.href = URL.createObjectURL(blob);

link.click();

[tron21]

Надим Закиров, Спасибо большое. Это очень помогло!