无法在“Window”上执行“btoa”:要编码的字符串包含超出 Latin1 范围的字符。

IT技术 javascript google-chrome
2021-01-24 17:24:27

根据我的测试,标题中的错误仅在 Google Chrome 中引发。我正在对一个大的 XML 文件进行 base64 编码,以便可以下载它:

this.loader.src = "data:application/x-forcedownload;base64,"+
                  btoa("<?xml version=\"1.0\" encoding=\"utf-8\"?>"
                  +"<"+this.gamesave.tagName+">"
                  +this.xml.firstChild.innerHTML
                  +"</"+this.gamesave.tagName+">");

this.loader 是隐藏的 iframe。

这个错误实际上是一个很大的变化,因为通常情况下,谷歌浏览器会在btoa调用时崩溃Mozilla Firefox 在这里没有问题,所以问题与浏览器有关。我不知道文件中有任何奇怪的字符。实际上,我确实相信没有非 ASCII 字符。

问: 如何找到有问题的字符并替换它们,以便 Chrome 停止抱怨?

我曾尝试使用 Downloadify 来启动下载,但它不起作用。它不可靠并且不会引发任何错误以允许调试。

6个回答

如果您有 UTF8,请使用它(实际上适用于 SVG 源),例如:

btoa(unescape(encodeURIComponent(str)))

例子:

 var imgsrc = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(markup)));
 var img = new Image(1, 1); // width, height values are optional params 
 img.src = imgsrc;

如果您需要解码该 base64,请使用以下命令:

var str2 = decodeURIComponent(escape(window.atob(b64)));
console.log(str2);

例子:

var str = "äöüÄÖÜçéèñ";
var b64 = window.btoa(unescape(encodeURIComponent(str)))
console.log(b64);

var str2 = decodeURIComponent(escape(window.atob(b64)));
console.log(str2);

注意:如果你需要让它在 mobile-safari 中工作,你可能需要从 base64 数据中去除所有的空白......

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

2017年更新

这个问题再次困扰着我。
简单的事实是,atob 并没有真正处理 UTF8 字符串——它只是 ASCII。
另外,我不会使用像 js-base64 这样的膨胀软件。
但是webtoolkit确实有一个小巧、漂亮且易于维护的实现:

/**
*
*  Base64 encode / decode
*  http://www.webtoolkit.info
*
**/
var Base64 = {

    // private property
    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="

    // public method for encoding
    , encode: function (input)
    {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;

        input = Base64._utf8_encode(input);

        while (i < input.length)
        {
            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);

            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;

            if (isNaN(chr2))
            {
                enc3 = enc4 = 64;
            }
            else if (isNaN(chr3))
            {
                enc4 = 64;
            }

            output = output +
                this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
                this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
        } // Whend 

        return output;
    } // End Function encode 


    // public method for decoding
    ,decode: function (input)
    {
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;

        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
        while (i < input.length)
        {
            enc1 = this._keyStr.indexOf(input.charAt(i++));
            enc2 = this._keyStr.indexOf(input.charAt(i++));
            enc3 = this._keyStr.indexOf(input.charAt(i++));
            enc4 = this._keyStr.indexOf(input.charAt(i++));

            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;

            output = output + String.fromCharCode(chr1);

            if (enc3 != 64)
            {
                output = output + String.fromCharCode(chr2);
            }

            if (enc4 != 64)
            {
                output = output + String.fromCharCode(chr3);
            }

        } // Whend 

        output = Base64._utf8_decode(output);

        return output;
    } // End Function decode 


    // private method for UTF-8 encoding
    ,_utf8_encode: function (string)
    {
        var utftext = "";
        string = string.replace(/\r\n/g, "\n");

        for (var n = 0; n < string.length; n++)
        {
            var c = string.charCodeAt(n);

            if (c < 128)
            {
                utftext += String.fromCharCode(c);
            }
            else if ((c > 127) && (c < 2048))
            {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else
            {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }

        } // Next n 

        return utftext;
    } // End Function _utf8_encode 

    // private method for UTF-8 decoding
    ,_utf8_decode: function (utftext)
    {
        var string = "";
        var i = 0;
        var c, c1, c2, c3;
        c = c1 = c2 = 0;

        while (i < utftext.length)
        {
            c = utftext.charCodeAt(i);

            if (c < 128)
            {
                string += String.fromCharCode(c);
                i++;
            }
            else if ((c > 191) && (c < 224))
            {
                c2 = utftext.charCodeAt(i + 1);
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i += 2;
            }
            else
            {
                c2 = utftext.charCodeAt(i + 1);
                c3 = utftext.charCodeAt(i + 2);
                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                i += 3;
            }

        } // Whend 

        return string;
    } // End Function _utf8_decode 

}

https://www.fileformat.info/info/unicode/utf8.htm

  • 对于等于或小于 127(十六进制 0x7F)的任何字符,UTF-8 表示为一个字节。它只是完整 unicode 值的最低 7 位。这也与 ASCII 值相同。

  • 对于等于或小于 2047(十六进制 0x07FF)的字符,UTF-8 表示分布在两个字节中。第一个字节将设置两个高位,第三个位清零(即 0xC2 到 0xDF)。第二个字节将设置最高位,清除第二位(即 0x80 到 0xBF)。

  • 对于等于或大于 2048 但小于 65535 (0xFFFF) 的所有字符,UTF-8 表示分布在三个字节中。

如果我是你,我就会运行代码。escape将字符串转换为仅包含 url 有效字符的字符串。这可以防止错误。
2021-03-17 17:24:27
@Leif:这只有效,因为escape 和unescape 有问题(以同样的方式);)
2021-03-23 17:24:27
你能再解释一下吗……我完全迷失了
2021-03-26 17:24:27
还有其他人因为使用 webpack 而在这里结束了吗?
2021-03-31 17:24:27
escapeunescape在 JavaScript 1.5 中被弃用,应该分别使用encodeURIComponentdecodeURIComponent代替。您正在同时使用已弃用的功能和新功能。为什么?请参阅:w3schools.com/jsref/jsref_escape.asp
2021-04-03 17:24:27

改用图书馆

我们不必重新发明轮子。只需使用库即可节省时间和头痛。

js-base64

https://github.com/dankogai/js-base64很好,我确认它很好地支持 unicode。

Base64.encode('dankogai');  // ZGFua29nYWk=
Base64.encode('小飼弾');    // 5bCP6aO85by+
Base64.encodeURI('小飼弾'); // 5bCP6aO85by-

Base64.decode('ZGFua29nYWk=');  // dankogai
Base64.decode('5bCP6aO85by+');  // 小飼弾
// note .decodeURI() is unnecessary since it accepts both flavors
Base64.decode('5bCP6aO85by-');  // 小飼弾
这是一个很好的解决方案,尽管将 btoa 限制为 ASCII 似乎是一种疏忽(尽管 atob 解码似乎工作正常)。在其他几个答案不起作用之后,这对我有用。谢谢!
2021-03-22 17:24:27

使用btoawithunescape并且encodeURIComponent对我不起作用。用 XML/HTML 实体替换所有特殊字符,然后转换为 base64 表示是解决这个问题的唯一方法。一些代码:

base64 = btoa(str.replace(/[\u00A0-\u2666]/g, function(c) {
    return '&#' + c.charCodeAt(0) + ';';
}));
@ItaloBorssatto 这是唯一对我有用的解决方案。我需要它来获取 d3 svg 图表,使用 XMLSerializer 对其进行序列化,将其传递到 btoa()(这是我使用您的解决方案的地方)以创建一个 base-64 编码的 ASCII 字符串,然后将其传递到图像元素中然后绘制到画布中,然后将其导出,以便您可以在前端下载图像。相当复杂和 hacky 的解决方案,但是当用户想要下载一些图形时不需要服务器端渲染图表。如果您有兴趣,我可以向您发送一些代码示例。评论对他们来说太短了
2021-03-18 17:24:27
自从我发布了这个问题以来,我对专用于我所做工作的 API 有了一些了解。如果您要转换的字符串很长,请使用Blobobject 来处理转换。Blob可以处理任何二进制数据。
2021-03-19 17:24:27
@ItaloBorssatto 你是个传奇!
2021-03-23 17:24:27
不知道IE9。但我的想法是,如果你在做像 base64 转换客户端这样的事情,你可能正在制作现代网络应用程序,迟早会需要现代功能。此外,还有一个 blob polyfill。
2021-04-01 17:24:27
@ItaloBorssatto <svg xmlns=" w3.org/2000/svg " viewBox="0 0 1060 105" width="1060" height="105"><path class="domain" stroke="none" d="M -6,0.5H0.5V35.5H-6"><line stroke="none" x2="-6" y1="0.5" y2="0.5" fill="none" stroke-width="1px" font- family="sans-serif" font-size="10px"/><text fill="rgb(196, 196, 196)" x="-9" y="0.5" dy="0.32em">VogueEspana - Vogue España</text><rect class="first bar" fill="rgb(25, 244, 71)" x="0" y="8" width="790" height="18" /></ g></svg> 我剪掉了不相关的部分。罪魁祸首是 Vogue España -->
2021-04-02 17:24:27

我只是想我应该分享我如何实际解决问题以及为什么我认为这是正确的解决方案(前提是您没有针对旧浏览器进行优化)。

将数据转换为 dataURL ( data: ...)

var blob = new Blob(
              // I'm using page innerHTML as data
              // note that you can use the array
              // to concatenate many long strings EFFICIENTLY
              [document.body.innerHTML],
              // Mime type is important for data url
              {type : 'text/html'}
); 
// This FileReader works asynchronously, so it doesn't lag
// the web application
var a = new FileReader();
a.onload = function(e) {
     // Capture result here
     console.log(e.target.result);
};
a.readAsDataURL(blob);

允许用户保存数据

除了明显的解决方案 - 使用 dataURL 作为 URL 打开新窗口之外,您还可以做另外两件事。

1.使用fileSaver.js

文件保护程序可以使用预定义的文件名创建实际的文件保存对话框。它也可以回退到正常的 dataURL 方法。

2. 使用(实验) URL.createObjectURL

这对于重用 base64 编码数据非常有用。它为您的 dataURL 创建一个短 URL:

console.log(URL.createObjectURL(blob));
//Prints: blob:http://stackoverflow.com/7c18953f-f5f8-41d2-abf5-e9cbced9bc42

不要忘记使用包含前导blob前缀的 URL document.body再次使用

图片说明

您可以将此短 URL 用作 AJAX 目标、<script>源或<a>href 位置。您负责销毁 URL:

URL.revokeObjectURL('blob:http://stackoverflow.com/7c18953f-f5f8-41d2-abf5-e9cbced9bc42')
所有这些想法似乎都是合法的,但在我的尝试中它们都不起作用……我在 Chrome 上总是得到一个空白方块。例如,使用我的 SO avatar(压缩,因为这些评论无论如何都很苛刻):window.location = URL.createObjectURL(new Blob([await fetch('https://www.gravatar.com/avatar/acfb059457d47b1086189cddb2f3857c?s=64&d=identicon&r=PG').then(x => x.text())], {type: 'image/jpg'}))
2021-03-26 17:24:27
谢谢伙计,你救了我的一天:)
2021-04-08 17:24:27

作为 Stefan Steiger 回答的补充:(因为它看起来不像评论)

扩展字符串原型:

String.prototype.b64encode = function() { 
    return btoa(unescape(encodeURIComponent(this))); 
};
String.prototype.b64decode = function() { 
    return decodeURIComponent(escape(atob(this))); 
};

用法:

var str = "äöüÄÖÜçéèñ";
var encoded = str.b64encode();
console.log( encoded.b64decode() );

笔记:

如评论中所述,unescape不建议使用,因为将来可能会删除它:

警告:虽然 unescape() 没有被严格弃用(如“从 Web 标准中删除”),但它在 ECMA-262 标准的附录 B 中定义,其介绍指出:……本文档中指定的所有语言特性和行为附件有一个或多个不受欢迎的特性,如果没有遗留用法,将从本规范中删除。

注意:不要使用 unescape 来解码 URI,而是使用decodeURIdecodeURIComponent

Javascript 是一种不好的做法。什么是更多的黑客,谢谢。
2021-03-13 17:24:27
函数看起来不错,但扩展基本原型是一种不好的做法。
2021-03-22 17:24:27
@ rob5408:虽然我原则上同意你的说法,但你真的应该更加谨慎:扩展原型破坏了 jQuery(另一个使用“仅一次黑客”原则的库)
2021-04-07 17:24:27
@StefanSteiger 很高兴知道,感谢您的洞察力。
2021-04-11 17:24:27
2021-04-12 17:24:27