C# WebApi PDF download implementation using Angular JS Authentication

Web Api Controller for File Download

[HttpGet]
    [Authorize]
    [Route("OpenFile/{QRFileId}")]
    public HttpResponseMessage OpenFile(int QRFileId)
    {
        QRFileRepository _repo = new QRFileRepository();
        var QRFile = _repo.GetQRFileById(QRFileId);
        if (QRFile == null)
            return new HttpResponseMessage(HttpStatusCode.BadRequest);

        string path = ConfigurationManager.AppSettings["QRFolder"] + + QRFile.QRId + @"\" + QRFile.FileName;
        if (!File.Exists(path))
            return new HttpResponseMessage(HttpStatusCode.BadRequest);

        HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
        Byte[] bytes = File.ReadAllBytes(path);
        response.Content = new ByteArrayContent(bytes);
        response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
        response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
        response.Content.Headers.ContentDisposition.FileName = QRFile.FileName;

        return response;
    }

Angular JS Service to retrieve PDF

this.getPDF = function (apiUrl) {
            var headers = {};
            headers.Authorization = 'Bearer ' + sessionStorage.tokenKey;
            var deferred = $q.defer();
            $http.get(
                hostApiUrl + apiUrl,
                {
                    responseType: 'arraybuffer',
                    headers: headers
                })
            .success(function (result, status, headers) {
                deferred.resolve(result);;
            })
             .error(function (data, status) {
                 console.log("Request failed with status: " + status);
             });
            return deferred.promise;
        }

        this.getPDF2 = function (apiUrl) {
            var promise = $http({
                method: 'GET',
                url: hostApiUrl + apiUrl,
                headers: { 'Authorization': 'Bearer ' + sessionStorage.tokenKey },
                responseType: 'arraybuffer'
            });
            promise.success(function (data) {
                return data;
            }).error(function (data, status) {
                console.log("Request failed with status: " + status);
            });
            return promise;
        }

Either one of the functions can be used for PDF retrieval.

Angular JS Controller calling the service

vm.open3 = function () {
        var downloadedData = crudService.getPDF('ClientQRDetails/openfile/29');
        downloadedData.then(function (result) {
            var file = new Blob([result], { type: 'application/pdf;base64' });
            var fileURL = window.URL.createObjectURL(file);
            var seconds = new Date().getTime() / 1000;
            var fileName = "cert" + parseInt(seconds) + ".pdf";
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.style = "display: none";
            a.href = fileURL;
            a.download = fileName;
            a.click();
        });
    };

And lastly, the HTML page containing the button to trigger the file download.

<a class="btn btn-primary" ng-click="vm.open3()">Download PDF</a>

This code snippet showcases how to implement PDF download functionality using C# WebApi and Angular JS Authentication. These steps were shared after going through an extensive process of refining the code to make it work properly.

My experience with building a Web API involved using Rails as the backend and Angular on the client side, along with Restangular and FileSaver.js for added functionality.

In terms of the Web API itself, I worked with a DownloadsController in the Api::V1 module. The show method within this controller retrieves a specific download using its ID and sends the data associated with it to the user.

Within the HTML code, there is an anchor tag that triggers a download when clicked. This download function is tied to an Angular controller.

The Angular service called "Download" plays a crucial role in the process. It utilizes Restangular to make API calls and retrieve the necessary data. Once the data is obtained, it is processed and saved as a PDF file using FileSaver.js.

We also faced the challenge of developing a solution that could effectively work with APIs that require authentication (refer to this informative article)

As we worked extensively with AngularJS, let me explain how we tackled this issue:

Step 1: Creation of an exclusive directive

// Please note that jQuery is required and Bootstrap classes are used in the code. You may need to adjust the templateUrl path based on your project setup.
app.directive('pdfDownload', function() {
return {
    restrict: 'E',
    templateUrl: '/path/to/pdfDownload.tpl.html',
    scope: true,
    link: function(scope, element, attr) {
        var anchor = element.children()[0];

        // Disable the link when the download starts
        scope.$on('download-start', function() {
            $(anchor).attr('disabled', 'disabled');
        });

        // Once the download finishes, attach the data to the link, enable it, and change its appearance 
        scope.$on('downloaded', function(event, data) {
            $(anchor).attr({
                href: 'data:application/pdf;base64,' + data,
                download: attr.filename
            })
                .removeAttr('disabled')
                .text('Save')
                .removeClass('btn-primary')
                .addClass('btn-success');

            // Clear the functionality of the download pdf function
            scope.downloadPdf = function() {
            };
        });
    },
    controller: ['$scope', '$attrs', '$http', function($scope, $attrs, $http) {
        $scope.downloadPdf = function() {
            $scope.$emit('download-start');
            $http.get($attrs.url).then(function(response) {
                $scope.$emit('downloaded', response.data);
            });
        };
    }] 
});

Step 2: Designing the template

<a href="" class="btn btn-primary" ng-click="downloadPdf()">Download</a>

Step 3: Implementation

<pdf-download url="/some/path/to/a.pdf" filename="my-awesome-pdf"></pdf-download>

This will display a blue button. Upon clicking, a PDF file (Note: the backend should deliver the PDF in Base64 encoding!) will be downloaded and placed within the href attribute. The button's color changes to green and its text transforms to Save. If clicked again, the user will see the standard file download dialog prompting them to save the file named my-awesome.pdf.

Convert your file to a base64 encoded string.

const element = angular.element('<a/>');
                         element.attr({
                             href: 'data:attachment/csv;charset=utf-8,' + encodeURI(atob(response.payload)),
                             target: '_blank',
                             download: fname
                         })[0].click();

If the attr method doesn't work in Firefox, you can also use JavaScript's setAttribute method.

One approach to implement a function for displaying files is by creating a showfile function that takes parameters from the returned data of a WEBApi and a desired filename for the file to be downloaded. In my case, I developed a separate browser service that identifies the user's browser and handles the rendering of the file accordingly. For example, if the target browser is Chrome on an iPad, you would need to utilize JavaScript's FileReader object.

The FileService.showFile function is responsible for receiving the data and filename as input. It then creates a Blob containing the data with the MIME type set to 'application/pdf'. Afterward, it proceeds to determine which method to use based on the user's browser.

For Internet Explorer, the window.navigator.msSaveOrOpenBlob method is used to initiate the file download dialog.

If the user's browser is Chrome on an iOS device, the loadFileBlobFileReader function is called, taking in the window object, blob data, and the filename as parameters. This function utilizes a FileReader object to read the contents of the blob as binary string data, convert it to a Base64 encoded URI, and finally navigate the browser to that URI.

For iOS or Android browsers, a unique URL is created using the URL.createObjectURL method. The window.location.href is then assigned this URL, resulting in the file being downloaded.

Lastly, any other browser will load the report within an iframe element using the loadReportBrowser function, passing in the URL, window object, and filename.

I have explored numerous solutions and stumbled upon a fantastic one that worked flawlessly for me.

In my specific scenario, I needed to send a post request including certain credentials. To achieve this, I had to incorporate jquery into the script, which slightly increased the overhead. However, the benefits outweighed the drawbacks.

var generatePDF = function () {
        //prevent duplicate transmissions
        var transmissionData = {};
        transmissionData.action = "Generate";
        transmissionData.url = "api/Generate";
        jQuery('<form action="' + transmissionData.url + '" method="POST">' +
            '<input type="hidden" name="action" value="Generate" />'+
            '<input type="hidden" name="userID" value="'+$scope.user.userID+'" />'+
            '<input type="hidden" name="ApiKey" value="' + $scope.user.ApiKey+'" />'+
            '</form>').appendTo('body').submit().remove();

    }