如何在 JSON 中接收字节数组答案

【问题标题】：How to receive a byte array inside a JSON如何在 JSON 中接收字节数组
【发布时间】：2019-06-22 02:35:02
【问题描述】：

我正在尝试从服务器接收 PDF，该 PDF 将包装在 JSON 中。

如果我只是将pdf的字节数组发送到前端，我可以通过将responseType设置为arraybuffer来正确读取它，然后我可以通过以下方式下载PDF：

var blob = new Blob([data], { type: application/pdf});
    if ($window.navigator && $window.navigator.msSaveOrOpenBlob) {
        $window.navigator.msSaveOrOpenBlob(blob);
    } else {
        var a = document.createElement("a");
        document.body.appendChild(a);
        var fileURL = URL.createObjectURL(blob);
        a.href = fileURL;
        a.download = fileName;
        a.click();
    }
}

但是，当服务器尝试发送带有字节数组的 JSON 时，如果我将 responseType 设置为 JSON，那么我将无法转换 blob。但是，如果我将responseType 设置为arrayBuffer，我将得到一个arrayBuffer 数组，如何将其转换为JSON，同时仍然能够提取PDF：

我收到的 JSON 格式为：

{
  result: true,
  value: <the pdf byte array>,
  errorMessage: null
}

【问题讨论】：

JSON 不是为二进制内容设计的。您必须使用字符串格式，因此您必须将二进制文件编码为字符串格式，然后将其解码以使其恢复为二进制文件。我强烈建议您使用 Petr Averyanov 回答的 base64

标签： javascript angularjs json arraybuffer

【解决方案1】：

假设下面的变量代表responseText的结构：

responseText = {
      result: true,
      value: <the pdf byte array>,
      errorMessage: null
}

responseText.value 是字节数组。如果字节数组已经被输入为 Uint8Array 那么这将起作用。

（注意：存在其他Typed Arrays，因此请选择最适合您的情况）：

var blob = new Blob([response.value], { type: 'application/pdf'});
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob);
} else {
    var a = document.createElement("a");
    document.body.appendChild(a);
    var fileURL = URL.createObjectURL(blob);
    a.href = fileURL;
    a.download = 'test';//filename
    a.click();
}

但是，如果存在如下字节的字符串数组或整数数组：

responseText.value = [145, 229, 216, 110, 3]

并且它需要被转换为一个类型化的字节数组，那么下面就可以工作了：

var ba = new Uint8Array(responseText.value);

或

var ba = new Uint8Array([145, 229, 216, 110, 3]);

因此，

var blob = new Blob([ba], { type: 'application/pdf'});

这样字节数组可以用来创建一个blob，所以当click事件触发时文件被下载。

【讨论】：

并不是说这个答案本身有什么问题，而是我希望没有人这样做。如果我们在这个答案中举个确切的例子，那么二进制数据实际上只有 5 个字节。将其表示为转换为编码为 UTF-8 的字符串的 Uint8 数组，我们现在有一个 23 字节 有效负载（约大 336%）。 base64 等价物 (keXYbgM=) 即使有可选的填充，也只有 8 字节（比原来大约 36%）。

【解决方案2】：

您应该将字节转换为 base64 字符串并在 UI 上从中读取字节。

【讨论】：

【解决方案3】：

将字节数组值设置为字符串。解析 JSON 时将字符串转换为字节数组。

以Java Byte Array to String to Byte Array 为例。

【讨论】：