Mit Javascript ist atob zu decodieren base64 nicht richtig Dekodieren von utf-8 strings

Gibt es eine tolle Artikel auf Mozilla MDN docs, beschreibt genau dieses Problem:

Den "Unicode-Problem"
Da DOMStrings sind 16-bit-codierte Zeichenfolgen, die in den meisten Browsern aufrufen window.btoa auf eine Unicode-Zeichenfolge bewirkt, dass ein Character Out Of Range exception wenn ein Charakter überschreitet den Wertebereich einer 8-bit-byte (0x00~0xFF). Es gibt zwei mögliche Methoden, um dieses problem zu lösen:

• die erste ist, zu entkommen, der ganze string (UTF-8, siehe alsterrunde) und dann codieren;
• die zweite ist die Umwandlung von UTF-16 DOMString um eine UTF-8-array von Zeichen, und dann codieren.

Ein Hinweis auf die bisherigen Lösungen: der MDN-Artikel, ursprünglich vorgeschlagen unescape und escape zu lösen, die Character Out Of Range Ausnahme problem, aber seitdem wurden Sie als veraltet markiert. Einige andere Antworten hier vorgeschlagen haben, arbeiten, um dieses mit decodeURIComponent und encodeURIComponent, dies hat sich als unzuverlässig und unberechenbar. Das neueste update dieser Antwort benutzt moderne JavaScript-Funktionen, um die Geschwindigkeit zu erhöhen und zu modernisieren-code.

Wenn Sie versuchen, sparen Sie sich die Zeit, Sie könnten auch erwägen Sie die Verwendung einer Bibliothek:

• js-base64 (NPM, ideal für Node.js)
• base64-js

Encoding UTF8 ⇢ base64

function b64EncodeUnicode(str) {
    //first we use encodeURIComponent to get percent-encoded UTF-8,
    //then we convert the percent encodings into raw bytes which
    //can be fed into btoa.
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
        function toSolidBytes(match, p1) {
            return String.fromCharCode('0x' + p1);
    }));
}

b64EncodeUnicode('✓ à la mode'); //"4pyTIMOgIGxhIG1vZGU="
b64EncodeUnicode('\n'); //"Cg=="

Decodieren von base64 ⇢ UTF8

function b64DecodeUnicode(str) {
    //Going backwards: from bytestream, to percent-encoding, to original string.
    return decodeURIComponent(atob(str).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
}

b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); //"✓ à la mode"
b64DecodeUnicode('Cg=='); //"\n"

Die pre-2018-Lösung (funktional, und obwohl wahrscheinlich eine bessere Unterstützung für ältere Browser, die nicht up-to-date)

Hier ist die aktuelle Empfehlung, direkt aus MDN, mit einigen zusätzlichen Typoskript Kompatibilität via @MA-Maddin:

//Encoding UTF8 ⇢ base64

function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode(parseInt(p1, 16))
    }))
}

b64EncodeUnicode('✓ à la mode') //"4pyTIMOgIGxhIG1vZGU="
b64EncodeUnicode('\n') //"Cg=="

//Decoding base64 ⇢ UTF8

function b64DecodeUnicode(str) {
    return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
    }).join(''))
}

b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU=') //"✓ à la mode"
b64DecodeUnicode('Cg==') //"\n"

Der ursprünglichen Lösung (veraltet)

Diese verwendet escape und unescape (die sind jetzt veraltet, obwohl diese noch funktioniert in allen modernen Browsern):

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

function b64_to_utf8( str ) {
    return decodeURIComponent(escape(window.atob( str )));
}

//Usage:
utf8_to_b64('✓ à la mode'); //"4pyTIMOgIGxhIG1vZGU="
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); //"✓ à la mode"

Und eine Letzte Sache: ich traf zuerst dieses problem beim aufrufen der GitHub API. Um diese arbeiten auf die (Mobile) Safari richtig, ich hatte tatsächlich zu entfernen, Leerzeichen aus dem base64-Quelle vor konnte ich noch entschlüsseln, die Quelle. Ob oder nicht, dies ist immer noch relevant, im Jahr 2017, ich weiß nicht:

function b64_to_utf8( str ) {
    str = str.replace(/\s/g, '');    
    return decodeURIComponent(escape(window.atob( str )));
}

InformationsquelleAutor brandonscript

Wenn die Behandlung von strings als bytes mehr Ihre Sache ist, können Sie die folgenden Funktionen verwenden

function u_atob(ascii) {
    return Uint8Array.from(atob(ascii), c => c.charCodeAt(0));
}

function u_btoa(buffer) {
    var binary = [];
    var bytes = new Uint8Array(buffer);
    for (var i = 0, il = bytes.byteLength; i < il; i++) {
        binary.push(String.fromCharCode(bytes[i]));
    }
    return btoa(binary.join(''));
}


//example, it works also with astral plane characters such as '?'
var encodedString = new TextEncoder().encode('✓');
var base64String = u_btoa(encodedString);
console.log('✓' === new TextDecoder().decode(u_atob(base64String)))

InformationsquelleAutor Riccardo Galli

Kleine Korrektur, unescape und Flucht sind veraltet, so:

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

function b64_to_utf8( str ) {
     return decodeURIComponent(encodeURIComponent(window.atob(str)));
}


function b64_to_utf8( str ) {
    str = str.replace(/\s/g, '');    
    return decodeURIComponent(encodeURIComponent(window.atob(str)));
}

InformationsquelleAutor Darkves

einschließlich der oben genannten Lösung ist, wenn noch immer mit Problem versuchen, wie unten, Considerign der Fall, wo die Flucht wird nicht unterstützt für TS.

blob = new Blob(["\ufeff", csv_content]); //this will make symbols to appears in excel 

für csv_content können Sie versuchen, wie unten.

function b64DecodeUnicode(str: any) {        
        return decodeURIComponent(atob(str).split('').map((c: any) => {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));
    }

InformationsquelleAutor Diwakar