Download PDF using Angular

Question

I'm trying to download PDF from a WebApi using Angular but the file is only 15 bytes. If I log the data being received from the WebApi it's an arraybuffer with the expected size

The WebApi

    [HttpGet]
    public HttpResponseMessage MatchRegistrationReport(int matchId)
    {
        try
        {
            var gen = new MSReports.Components.MatchRegistration();
            byte[] bytes = gen.GeneratePDF(matchId, 10);
            var stream = new MemoryStream(bytes);

            var result = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new StreamContent(stream)
                //Content = new ByteArrayContent(bytes)
            };
            result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = gen.ReportName + ".pdf"
            };
            result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
            return result;
        }
        catch (Exception ex)
        {
            Log.Error(ex.Message);
            return Request.CreateResponse(HttpStatusCode.BadRequest, ex.Message);
        }
    }

The Angular controller

$scope.Print = function () {
    $scope.message = "Downloading";
    reportResource.printMatchRegistration($scope.match.Id).then(function (data, status, headers, config) {
        var file = new Blob([data], {
            type: 'application/csv'
        });
        //trick to download store a file having its URL
        var fileURL = URL.createObjectURL(file);
        var a = document.createElement('a');
        a.href = fileURL;
        a.target = '_blank';
        a.download = 'MatchRegistration.pdf';
        document.body.appendChild(a);
        a.click();
        //$scope.message = "Completed";
    }, function (data, status, headers, config) {
        $scope.message = "A error occurred";
    });
}

and the resource

printMatchRegistration: function (matchId) {
  return $http({
  method: 'get',
  url: this.getApiPath() + "MatchRegistrationReport?matchId=" + matchId,
  headers: {
      'Content-type': 'application/pdf',
  },
  responseType: 'arraybuffer'
});

I believe it has something to do with the content-type but can' figure out what.

Answer 1

Hi just found the answer

Change to this

reportResource.printMatchRegistration($scope.match.Id).then(function (response) {
    var file = new Blob([response.data], {
        type: 'application/pdf'
    });

and this

        printMatchRegistration: function (matchId) {
            var data = { 'matchId': matchId };
            return $http({
                method: 'get',
                url: this.getApiPath() + "MatchRegistrationReport",
                params: data,
                headers: {
                    'Content-type': 'application/pdf',
                },
                responseType: 'arraybuffer'
            });
        },