我在基于 AngularJS 构建的 SPA 中有一个文本输入框，供用户向打印输出添加标题。输入框声明如下:

<input class="chart-title" type="text" ng-model="chartTitle" ng-change="titleChanged()"/>

文本框由服务器提供的默认标题填充。用户可以将标题更改为适合他们的任何内容。当标题更改时，服务器会更新并在响应的 header 中发回新标题，然后替换框中的标题。这非常适用于标准 ASCII 类型字符。

但是，对于 unicode 字符(例如 àßéçøö)，它不起作用。文本被正确发送，在服务器上正确更新，并正确返回到 SPA。请求/响应的 header 在这里:

Request URL:http://blahblahblah/api/.....&chartTitle=Instrument:%20%C3%A0%C3%9F%C3%A9%C3%A7%C3%B8%C3%B6

响应头:

chartTitle: Instrument: %C3%A0%C3%9F%C3%A9%C3%A7%C3%B8%C3%B6

请求是使用 AngularJS $http() 发出的。如您所见，这些值是匹配的(出于显而易见的原因，请求中的空格编码为 %20)。但是，当我使用 headers("charttitle") 检索 header 时，我收到的值是

javascript 包在索引中使用字符集 utf-8 声明:

<script src="/js/bundle.js" type="text/javascript" charset="UTF-8"></script>

此外，html 是使用正确的字符集声明的，在我看来是在 head 声明中的两个地方:

<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta charset="utf-8" />

根据此网站 ( http://www.i18nqa.com/debug/utf8-debug.html ) 看来我正在获取 Windows1252 字符编码。这没有任何意义。如果绝对必要，我可以编写一个可怕的 hack，将 utf-8 字符串转换为 Windows1252 字符，但这似乎有点极端，而且对我来说很容易出错。

不管是Chrome、Firefox还是IE11，效果都是一样的。完整的请求 header 在这里:

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Host:blahblahblah
Origin:http://blahblahblah
Referer:http://blahblahblah/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

有什么我遗漏的吗？有什么被遗忘的吗？

编辑

请求的完整响应 header 。

Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:chartTitle
Cache-Control:private
chartTitle:Instrument: %C3%A0%C3%9F%C3%A9%C3%A7%C3%B8%C3%B6
Content-Disposition:attachment; filename=PrintData.pdf
Content-Length:1391643
Content-Type:application/octet-stream
Date:Fri, 20 Jan 2017 11:19:07 GMT
Server:Microsoft-IIS/10.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcR2l0XEVPU1xSZXZpZXdlci5XZWJcYXBpXFByaW50XGQyOTNkNjA4NWVlYzlhNTEwYjQ5YThmZGQxNjNhMjAwMWZhYTFjMGY5YzhiMzUxYzE5ZjYxYWMwYTY1OWVhMDM=?=

围绕headers的代码

$http({
    method: 'GET',
    url: filePath,
    params: {
        fileName: fileName
    },
    responseType: 'arraybuffer',
    headers: {'Content-Type' : 'application/json; charset=UTF-8'}
}).success(function (data, status, headers) {
    ready();
    if (status == 200) {
        var chartTitle = headers("charttitle");
        var printoutInformation = {'chartTitle' : chartTitle, 'pdfData' : data};
        deferred.resolve(printoutInformation);
    }
    else {
        deferred.resolve(null);
    }
    }).error(function (data) {
        ready();
        console.log(data);
    });
    return deferred.promise;

编辑

api 的 web.config 也指定了 utf-8:

    <globalization requestEncoding="utf-8" responseEncoding="utf-8"/>

长话短说

在文本框中，我想显示“Instrument àßéçøö”，但我看到的是“Instrument: à ÃÃéçøö”

最佳答案

您的问题已解决。

基于这个来源，

UTF-8 character debugging and its encoding and decoding

您得到的响应是编码的 utf-8 字符串的实际字符

因此，您需要对其进行解码才能获得结果。

这是执行此操作的代码。

    decoded =  decodeURIComponent('%C3%A0%C3%9F%C3%A9%C3%A7%C3%B8%C3%B6')

    console.log(decoded);

   The result is => "àßéçøö"

我们必须这样做才能获得实际的字符串而不是 UTF-8

因此，根据您的回复，您得到了à ÃÃéçøö

decodeURIComponent(escape("à Ãéçøö")) => "àßéçøö"

定义:

decodeURIComponent():

• 表示给定编码统一资源标识符 (URI) 组件的解码版本的新字符串。

那么，这是您的方法。

if (status == 200) {
    var original = headers("charttitle");
    var chartTitle = decodeURIComponent(escape(original));
    console.log(chartTitle);
    var printoutInformation = {'chartTitle' : chartTitle, 'pdfData' : data};
    deferred.resolve(printoutInformation);
}

现在，您将获得与发送时相同的 header 。

关于javascript - 在 AngularJS 中未正确解码 UTF-8 字符串，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41718364/