0

My current architecture:

  • Two backends - one C# and one Python/Flask - providing JSON-based data to a front-end application.
  • Front-end application written in AngularJS 1.6.
  • Reports being generated from Angular views - dynamically generated with AngularJS's data binding.
  • CSS hacks being used to make output suitable for printing. (On-screen view is pretty bad though.)
  • Authentication is via bearer token using OAuth - credentials are provided to a backend endpoint which generates a token that is then provided with each request.

What I'd like to do:

  • Transition to a mode where reports are generated and delivered to the user as a PDF file. This could be done either on the frontend or the backend, but the backend seems like it'd be a more appropriate place - not to mention, doing it on the frontend could bring the same issues I'm already having with CSS hacks.
  • The generated PDF files must be able to have a repeating header and footer, both of which may contain dynamic data (e.g. page numbers in the footer, client name in the header)
  • PDF downloads need to be authenticated. (It should not be possible to request a PDF without some backend code being run to ensure the request is approved)
  • PDF authentication must be able to integrate with the OAuth bearer token authentication already being used by the app (C# backend generates a bearer token. Python backend currently is only serving non-private data, but we could do a dual-login scenario where both APIs generate their own tokens.)

Here's my challenges:

  • For some reason browsers do not support @page CSS even when printing a webpage. Therefore, I cannot include headers or footers. Not to mention each browser may render the content slightly differently. Generating PDF on the backend will unify the reports.
  • Since the reports are currently dynamically generated on the frontend using AngularJS, I would probably have to change how this is done in order for the backend to be able to self-generate PDF files. I'm not sure where to start with this, other than maybe writing a C# class that can hand-generate the HTML - you won't have all the beauties of Angular data binding and ease of changing the template as needed though. I'd like this transition to be as smooth as reasonably possible.

My questions:

  • Is there a good free (open-source preferable, freeware OK, paid last-resort and within reason as this is a personal project which will only be used by maybe 3 people) library that can generate PDF from HTML/CSS on the backend and that can work within my environment of OAuth token authentication?
  • What would be the best approach to generate the HTML for reports on the backend without the help of AngularJS data binding? Manual HTML generation in CSS/Python? Some other data binding framework that's designed for backend (not sure if that exists)?
  • Maybe you can find something of use in this Stack Overflow question. Also, it sounds like you would like to stick to converting HTML to PDF, but if you are open to generating the PDF from scratch, that opens up more options (such as ReportLab in Python). – John Y Jan 12 '18 at 23:33
  • I'm not dead-set on converting HTML to PDF, just that I've spent considerable time getting the reports to look right using HTML and CSS and would like to not see all that go to waste. I may have to reconsider this either way though since I won't be able to use AngularJS data binding to generate the reports if I use a backend HTML->PDF renderer... – fdmillion Jan 13 '18 at 0:05
1

Syncfusion provides support for converting URL/HTML string to PDF in server side using C#, which may be suitable for your requirement. https://www.syncfusion.com/pdf-framework/net/html-to-pdf

1) You can toggle the media type of the HTML between Screen and Print, refer the below link for more details https://help.syncfusion.com/file-formats/pdf/converting-html-to-pdf#mediatype

2) Conversion can be authenticate by using OAuth (Bearer token) using the below code snippet.

        //Initialize HTML to PDF converter 
        HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.WebKit);
        WebKitConverterSettings webKitSettings = new WebKitConverterSettings();

        //Add custom HTTP request headers
        webKitSettings.HttpRequestHeaders.Add("Authorization", "bearer LXifBuVJzV4Fp_200rPdTHj_...");

        //Assign WebKit settings to the converter
        htmlConverter.ConverterSettings = webKitSettings;

        //Convert url to pdf
        PdfDocument document = htmlConverter.Convert(url);  

        //Save the document.
        document.Save("Sample.pdf");
        document.Close();  

3) Different Header and footer can be add in the PDF document after HTML to PDF conversion, please refer the below KB. https://www.syncfusion.com/kb/7797

4) The converter will load the data from client side data binding, as like it display in the web browser, the PDF will be saved.

The whole suite of controls is available for free (commercial applications also) through the community license program if you qualify (less than 1 million US Dollars in revenue). The community license is the full product with no limitations or watermarks.

Note: I work for Syncfusion.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.