Angularjs cannot display PDF stream in IE browser

I am trying to show a PDF stream received from WebApi to the browser using javascript. Currennt's code works fine on Chrome. However, it doesn't show anything in IE 10 (no errors). Any idea please.

Thank,

The server is powered by ASP.NET WebApi. Basically just export the PDF stream from the report template and send back to the client.

[Route("api/saleInvoices/getReport")]
    public IHttpActionResult GetReport(int invoiceID)
    {
        try
        {
            using (MemoryStream ms = new MemoryStream())
            {
                //report to pdf stream
                SaleInvoiceReport report = new SaleInvoiceReport(invoiceID);
                report.CreateDocument();
                //PdfExportOptions opts = new PdfExportOptions();
                //opts.ShowPrintDialogOnOpen = true;
                //report.ExportToPdf(ms, opts);
                report.ExportToPdf(ms);
                ms.Seek(0, SeekOrigin.Begin);
                byte[] buffer = ms.ToArray();

                //return
                HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
                result.Content = new ByteArrayContent(buffer);
                result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
                string fileName = string.Format("SalesInvoice_{0}.pdf", invoiceID);
                result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("inline") { FileName = fileName };
                return ResponseMessage(result);
            }
        }
        catch (Exception ex)
        {
            DatabaseHelper.Log(ex);

            return BadRequest(ex.Message);
        }
    }

      

The client is using a service / controller / view over AngularJS.

Service: get pdf stream to bufferarray.

var _report = function (id) {
        //delete $http.defaults.headers.common['X-Requested-With'];

        var req={
            url: sharedService.getApiUrl() + '/' + bizType + '/getReport?invoiceID=' + id,
            method: 'GET',
            //headers:{
            //    'Authorization': 'Bearer ' + sharedService.getToken(),
            //},
            //headers: { 'Accept': 'application/pdf' },
            responseType:'arraybuffer',
        };

        return $http(req);
    };

      

Controller: place the pdf stream in a block and return its trusted url.

saleInvoiceService.report($scope.invoice.id)
            .success(function (response) {
                console.log(JSON.stringify(response));

                var file = new Blob([response], { type: 'application/pdf' });
                var fileURL = URL.createObjectURL(file);
                $scope.url = $sce.trustAsResourceUrl(fileURL);
                //window.open(fileURL);
                //$scope.url = fileURL;

                $scope.isLoading = false;
                $scope.info = '';
            })
            .error(function (data) {
                $scope.isLoading = false;
                $scope.info = JSON.stringify(data);
            });

      

View: Assign trusted blob url in iframe.

<iframe ng-src="{{url}}" class="iframe-report"></iframe>

      

+3


source to share





All Articles