在AngularJS中未正确解码UTF-8字符串 [英] UTF-8 string not decoded correctly in AngularJS

问题描述

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

I have a text input box, within a SPA built on AngularJS, for users to add a title to a printout. The input box is declared like this:

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

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

The text box is filled with a default title provided by the server. A user may change the title to whatever suits them. When the title is changed, the server is updated and sends back a new title in the header of the response which then replaces the title in the box. This works perfectly for standard ASCII type characters.

但是，对于unicode字符（例如àßéçøö），它不起作用。文本正确发送，在服务器上正确更新，并正确返回到SPA。请求/响应的标头位于：

However, for unicode characters (for example àßéçøö) it does not work. The text is sent down correctly, updated on the server correctly, and returned to the SPA correctly. The headers for the request/response are here:

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 ，原因很明显）。但是，当我使用标题（charttitle）检索标题时，我收到的值是乐器：ÃÃÃÃÃÃ ¶

The request is made using AngularJS $http(). As you can see the values match up (the space in the request codes out as %20 for obvious reasons). However, when I retrieve the header, using headers("charttitle"), the value I receive is Instrument: àÃéçøö

javascript包在索引中用charset utf-8声明：

The javascript bundle is declared in the index with charset utf-8:

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

另外html是用正确的字符集声明的，在我看来头脑中的两个地方声明：

In addition the html is declared with the correct charset, it seems to me in two places within the head declaration:

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

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

According to this website (http://www.i18nqa.com/debug/utf8-debug.html) it appears that I am getting Windows1252 character encoding. This does not make any sense. I could, if absolutely necessary, write a horrible hack converting the utf-8 string to Windows1252 characters, but this seems a little extreme and quite error prone to me.

效果是一样的，无论是在Chrome，Firefox还是IE11上。完整的请求标题位于：

The effect is the same, whether on Chrome, Firefox or IE11. The full request headers are here:

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

我遗漏了什么吗？有什么东西被遗忘了吗？

Is there anything I have left out? Anything that has been forgotten?

编辑

完整的回复标题根据要求。

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=?=

围绕标题的代码

$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：

The web.config for the api also specifies utf-8:

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

TL; DR

在文本框中我想显示Instrumentàßéçøö，而我正在看仪器：ÃÃÃÃÃÃÃÃö

In a text box I want to display "Instrument àßéçøö" and instead I am seeing "Instrument: à Ãéçøö"

推荐答案

这是你的问题解决了。

根据这个来源，

UTF-8字符调试及其编码和解码

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

因此，您需要解码为了得到你的结果。

So, you need to decode that inorder to get your result.

HEre是执行此操作的代码。

HEre is the code to do it.

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

    console.log(decoded);

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

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

所以，根据您的回复，ÃÃÃÃÃÃÃÃÃ

So, from your response you got,à Ãéçøö

decodeURIComponent（escape（ÃÃÃÃÃçøø））=> àßéçøö

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

定义：

• 表示给定编码统一资源标识符的解码版本的新字符串（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);
}

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

Now, you will get the headers same as you send.

这篇关于在AngularJS中未正确解码UTF-8字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！