时间戳

首页 > 解决方案 > 如何在 JSON 中接收字节数组

javascript - 如何在 JSON 中接收字节数组

问题描述

我正在尝试从服务器接收 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();
    }
}

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

我收到的 JSON 格式如下：

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

标签： javascriptangularjsjsonarraybuffer

解决方案

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

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

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

（注意：存在其他类型的数组，因此请选择最适合您情况的数组）：

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事件触发时会下载文件。

推荐阅读