使用 utf-8 字符串在 javascript 客户端保存文件答案

【问题标题】：Save File in javascript clientside using utf-8 string使用 utf-8 字符串在 javascript 客户端保存文件
【发布时间】：2015-06-10 10:56:35
【问题描述】：

当用户单击下载按钮时，我需要下载图像文件。

我有从服务器返回的 utf-8 格式的文件内容。

例如：“.PNG IHDR@.v/j.sRGB..gAMA..a pHYs..o.d.IDATx^..TՕ._.~.^>.~. �N�M�:/��t�Iw�I^��̜8��I@шH��DC�(*" ....."

(当我在这个网站上传相同的文件时，http://codepen.io/jduprey/details/xbale中显示的确切文件字符串)

现在我需要创建文件的 blob 并将其保存在客户端。

我试过 FileSaver(https://github.com/eligrey/FileSaver.js) 库如下

var blob = new Blob( [ utfFileString ], { type: 'image/png' }); saveAs(blob, aData.name );

但下载的文件格式不正确，无法打开。

如果有人可以帮助我，不胜感激。

谢谢！

【问题讨论】：

标签： javascript utf-8 download blob

【解决方案1】：

Png 文件不是 utf-8 编码的，请注意字符串中所有那些无效的代码序列替换字符 (�)。
您需要以二进制格式获取数据，例如 blob 或数组缓冲区。类似的东西

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        ...
        var blob = this.response; //The binary data
        ...
        saveAs(blob, aData.name);
        ...
    }
}
xhr.open('GET', 'path/to/file');
xhr.responseType = 'blob'; // the response will be a blob and not text
xhr.send();

【讨论】：