javascript - 从 WebAPI 获取 PDF 并从 UI 下载，但数据已损坏

Question

我从我的 UI 调用 Web API Controller ，然后从 SSRS 获取报告。它将字节插入到响应的内容中，并将其发送到 UI，并在 UI 中以 PDF 格式下载。

在我的 Web API Controller 中，我将报告字节写入测试 PDF 文件以检查 pdf 的内容并查看数据是否正确，事实确实如此。但是当从我的用户界面下载 PDF 并打开它时，我得到一个空白页面文档。当我检查 Fiddler 中的响应内容时，我可以看到数据已损坏并且与测试 PDF 文件数据不匹配。

服务器端:

[HttpPost]
public HttpResponseMessage GetInstancePdf(InstancePdfModel model) {
  var bytes = _digitalFormService.GetInstancePdf(model.ClientGuid, model.InstanceGuid, model.InstanceVersion);

  File.WriteAllBytes(@ "c:\temp\test.pdf", bytes);

  var response = Request.CreateResponse();

  response.Content = new ByteArrayContent(bytes);
  response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue(DispositionTypeNames.Inline) {
    FileName = "file.pdf"
  };
  response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");

  return response;
}

客户端:

$scope.downloadPdf = function(instance) {
  $scope.isBusy = true;
  digitalFormService.getInstancePdf(instance.instanceGuid, instance.instanceVersion).then(function(data) {
    if (data.status === 200) {
      const file = new Blob([data.data], {
        type: data.headers("Content-Type")
      });
      if (navigator.appVersion.toString().indexOf(".NET") > 0) {
        window.navigator.msSaveBlob(file, (`${instance.name} ${(new Date()).toLocaleString()}`).replace(",", ""));
      } else {
        //trick to download, store a file having its URL
        const fileUrl = URL.createObjectURL(file);
        const a = document.createElement("a");
        a.href = fileUrl;
        a.target = "_blank";
        a.download = (`${instance.name} ${(new Date()).toLocaleString()}`).replace(",", "");
        document.body.appendChild(a);
        a.click();
      }
    } else {
      debugger;
    }
    $scope.isBusy = false;
  });
};

function getInstancePdf(instanceGuid, instanceVersion) {
  var data = {
    clientGuid: digitalFormConfig.clientToken,
    instanceGuid: instanceGuid,
    instanceVersion: instanceVersion
  };
  return $http({
    url: digitalFormConfig.serverUrl +
      "api/DigitalForm/GetInstancePdf",
    dataType: "json",
    data: data,
    method: "POST"
  }).then(function(response) {
      return response;
    },
    function() {
      return $q.reject("No Data");
    });
}

我希望我下载的 PDF 是一个信息文档，与 Web API Controller 中保存的测试 PDF 文件相匹配，但我得到的是一个空白文档(与测试文件的页数相同，但为空白)。

我使用 Fiddler 检查响应主体。当我将 Fiddler 中的响应主体保存为 pdf 时 - 一切都很好。所以我确定我的服务器端代码是正确的。问题一定出在客户端。

有什么帮助吗？谢谢。

Answer 1

我发现了错误。该错误在客户端服务中。代码应如下所示:

function getInstancePdf(instanceGuid, instanceVersion) {
    var data = {
        clientGuid: digitalFormConfig.clientToken,
        instanceGuid: instanceGuid,
        instanceVersion: instanceVersion
    };
    return $http({
        responseType: "arraybuffer",
        url: digitalFormConfig.serverUrl +
            "api/DigitalForm/GetInstancePdf",
        dataType: "json",
        data: data,
        method: "POST"
    }).then(function (response) {
            return response;
        },
        function () {
            return $q.reject("No Data");
        });
}

之前省略了 responseType: "arraybuffer", 行。