Загрузите PDF из WebAPI и загрузите из пользовательского интерфейса, но данные будут повреждены

Question

Я вызываю Web API Controller из моего пользовательского интерфейса, который затем получает отчет от SSRS.Он вставляет байты в содержимое ответа и отправляет его в пользовательский интерфейс, где он загружается в формате PDF.

Внутри моего контроллера Web API я записываю байты отчета в тестовый файл 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 будетинформационный документ, соответствующий тестовому файлу PDF, сохраненному в контроллере Web API, но вместо этого я получаю пустой документ (такое же количество страниц, что и у тестового файла, но пустой).

Я использовал 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", ранее была опущена.