使用Javascript File API保存文件会导致错误的编码

Question

我有一个问题(或可能是两个)使用HTML5 File API保存文件.

文件作为字节数组来自服务器,我需要保存它.我在SO上尝试了几种方法:

• 创建blob并在新选项卡中打开它
• 在href属性中使用"data:"创建隐藏的achor标记
• 使用FileSaver.js

所有方法都允许保存文件,但通过将编码更改为UTF-8来打破它,而文件(在当前测试用例中)是ANSI.似乎我遇到了问题:在服务器端和客户端.

服务器端: 服务器端是ASP.NET Web API 2应用程序,该控制器使用带有StreamContent的HttpResponseMessage发送文件.ContentType是正确的,并与实际文件类型相对应.

但是在下面的屏幕截图中可以看到服务器的答案(data.length)小于上传时计算的实际文件大小(file.size).此外可以看到HTML5 File对象还有另一个大小(f.size).

如果我将值为"ANSI"的CharSet添加到服务器的响应消息的ContentType属性中,则文件数据将与上载的相同,但是在保存结果文件时仍然具有错误的大小并且会损坏:

客户端: 我尝试使用JS File选项设置charset,但它没有帮助.正如在这里和这里可以找到的那样,FileUplaod.js的作者Eli Gray说

类型中的encoding/charset只是浏览器的元数据,而不是编码指令.

这意味着,如果我理解正确的话,就不可能改变文件的编码.

问题结果:最后我可以成功下载无法打开的损坏文件.

所以我有两个问题:

1. 如何使用File API"按原样"保存文件.目前我不能使用直接链接和'下载'属性的简单方法,因为服务器端检查请求标头中的access_token.可能这是"瓶颈"的问题？
2. 如何避免在服务器端设置CharSet并同时"按原样"发送字节数组？虽然这个问题可能会以某种方式被黑客入侵,但我认为这更为关键.例如,虽然"ANSI"字符集解决了当前文件的问题,但WinMerge显示它的编码是西里尔字母'Windows-1251',也可以是任何其他编码.

PS问题与除*.txt之外的所有文件类型(扩展名)有关.

更新

服务器端代码:

public HttpResponseMessage DownloadAttachment(Guid fileId)
{
    var stream = GetFileStream(fileId);

    var message = new HttpResponseMessage(HttpStatusCode.OK);
    message.Content = new StreamContent(stream);
    message.Content.Headers.ContentLength = file.Size;
    message.Content.Headers.ContentType = new MediaTypeHeaderValue(file.ContentType)
        {
            // without this charset files sent with bigger size
            // than they are as shown on image 1
            CharSet = "ANSI"
        };
    message.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
        {
            FileName = file.FileName + file.Extension,
            Size = file.Size
        };

    return message;
}

客户端代码(TypeScript):

/*
* Handler for click event on download <a> tag
*/
private downloadFile(file: Models.File) {
    var self = this;

    this.$service.downloadAttachment(this.entityId, file.fileId).then(
        // on success
        function (data, status, headers, config) {
            var fileName = file.fileName + file.extension;
            var clientFile = new File([data], fileName);
            // here's the issue ---^
            saveAs(clientFile, fileName);
        },
        // on fail
        function (error) {
            self.alertError(error);
    });
}

我的代码与关于SO的相关问题的答案几乎相同:不是在'a'标签中设置直接链接,我处理点击它并通过XHR下载文件内容(在我的情况下使用Angularjs $ http服务).获取文件内容我创建一个Blob对象(在我的例子中,我使用从Blob派生的File类),然后尝试使用FileSaver.js保存它.我还尝试使用href属性中的Blob编码URL进行处理,但它只打开一个新选项卡,文件以相同的方式断开.我发现probem在Blob类中 - 用'普通'文件数据调用它的构造函数我得到一个'错误'大小的实例,这可以在前两个sceenshots上看到.所以,据我所知,我的问题不是我尝试保存文件的方式,而是我创建它的方式- 文件API