从服务器获取文件时，JavaScript Blob上的编码错误 [英] Wrong encoding on JavaScript Blob when fetching file from server

问题描述

在SPA网站(.NET Core 2，SPA React模板)中，使用C#中的 FileStreamResult ，我从端点请求一个文件，该文件在C#中触发此响应:

Using a FileStreamResult from C# in a SPA website (.NET Core 2, SPA React template), I request a file from my endpoint, which triggers this response in C#:

var file = await _docService.GetFileAsync(token.UserName, instCode.Trim()
.ToUpper(), fileSeqNo);
string contentType = MimeUtility.GetMimeMapping(file.FileName);
var result = new FileStreamResult(file.File, contentType);
var contentDisposition = new ContentDispositionHeaderValue("attachment");
Response.Headers[HeaderNames.ContentDisposition] = 
contentDisposition.ToString();
return result;

使用 msSaveBlob 处理返回的响应(特别是对于MS，但这是一个问题，即使我使用 createObjectURL 和其他浏览器(是的，我也尝试了多种解决方案对此，但它们似乎都不起作用.)这是我用来发送请求并从服务器接收PDF FileStreamResult 的代码.

The returned response is handled using msSaveBlob (spesificly for MS, but this is a problem even though I use createObjectURL and different browser (Yes, I have tried multiple solutions to this, but none of them seems to work). This is the code I use to send the request, and receive the PDF FileStreamResult from the server.

if (window.navigator.msSaveBlob) {
  axios.get(url).then(response => {
      window.navigator.msSaveOrOpenBlob(
          new Blob([response.data], {type: "application/pdf"}),
          filename);
  });

问题是我得到的返回的PDF文件以某种方式对其编码有错误.因此，PDF将不会打开.

The problem is that the returned PDF file that I get has a wrong encoding on it somehow. So the PDF will not open.

我尝试将编码添加到类型的末尾: {type:"application/pdf; encoding = UTF-8"} 在不同的文章中建议使用，但是，没有区别.

I have tried adding encoding to the end of type: {type: "application/pdf; encoding=UTF-8"} which was suggested in different posts, however, it makes no difference.

比较以不同方式获取的PDF文件，我可以清楚地看到编码是错误的.大多数特殊字符都不正确.由响应标头指示，PDF文件应位于 UTF-8 中，但我不知道如何真正找出并检查.

Comparing a PDF file that I have fetched in a different way, I can clearly see that the encoding is wrong. Most of the special characters are not correct. Indicated by the response header, the PDF file should be in UTF-8, but I have no idea how to actually find out and check.

推荐答案

在不知道axios的情况下，似乎从其

Without knowing axios it seems though from its readme page that it uses JSON as default responseType. This may potentially alter the content as it is now treated as text (axios will probably bail out when it cannot convert to an actual JSON object and keep the string/text source for response data).

即使PDF可以是8位二进制内容也可以是7位ASCII，都应将其作为二进制数据加载-在任何情况下，都应将它们都视为来自

A PDF should be loaded as binary data even though it can be both, either 8-bit binary content or 7-bit ASCII - both should in any case be treated as a byte stream, from Adobe PDF reference sec. 2.2.1:

PDF文件表示为8位二进制字节的序列.PDF文件旨在在所有平台上可移植，并且操作系统.二进制表示法旨在直接生成，运输和消费，无需翻译在本机字符集，行尾表示形式或其他之间在各种平台上使用的约定.[...].

PDF files are represented as sequences of 8-bit binary bytes. A PDF file is designed to be portable across all platforms and operating systems. The binary rep resentation is intended to be generated, transported, and consumed directly, without translation between native character sets, end-of-line representations, or other conventions used on various platforms. [...].

任何PDF文件也可以仅使用7位的形式表示ASCII字符代码.这对于以下目的很有用像本书中的论述.但是，这种表示不是建议实际使用，因为它的效率比正常情况低二进制表示形式.不管是哪种表示形式使用过的PDF文件必须作为二进制文件进行传输和存储，不作为文本文件.[...]

Any PDF file can also be represented in a form that uses only 7-bit ASCII [...] character codes. This is useful for the purpose of exposition, as in this book. However, this representation is not recommended for actual use, since it is less efficient than the normal binary representation. Regardless of which representation is used, PDF files must be transported and stored as binary files, not as text files. [...]

因此，为了解决发生的转换，我建议尝试执行请求时尝试指定配置条目 responseType :

So to solve the conversion that happens I would suggest trying specifying the configuration entry responseType when doing the request:

axios.get(url, {responseType: "arraybuffer"}) ...

或采用以下形式:

axios({
  method: 'get',
  url: url,
  responseType:'arraybuffer'
})
.then( ... )

如果您确定该过程中保留了mime类型，则还可以直接转到响应类型.

You can also go directly to response-type blob if you are sure the mime-type is preserved in the process.

这篇关于从服务器获取文件时，JavaScript Blob上的编码错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！