PDF creation tool that can handle Client-side view changes - asp.net

Question

I am trying to find a tool that can be used to create PDFs from websites. These websites all have Bootstrap based client side view settings, such as tabs, toggles, and paging. As such, there is no post-back to the server. I need to be able to create a pdf that is in the same state as the user sees it.
In my research, I have only been able to find tools that can create PDFs if given a URL, or if given a HTML string. Examples of these tools include ActivePDF's Webgrabber, and EVO PDF. However, they are not able to generate the PDF's with the client-specific settings, but instead only see the default selections of a given page. It is not possible for me to do a post-back to the server, so I am looking for a tool that can create PDFs on the fly, with the dynamic settings intact. I am working in ASP.NET, and so I would like a tool that is .NET friendly as well. Lastly, I would prefer the tool to not be open-sourced.

Answer 1

It sounds like a proper solution here would be to take data from your client side, post it via AJAX (not an ASP.NET postback!) and then process it on the server side to generate the PDF. Since you haven't given much detail, I'm going to assume we don't need to send over all the HTML, but rather values that were entered via a form.
<script>
function postDataToServer(){
var itemId = $("#ItemIdTB").val();
var quantityOrdered = $("#QuantityTB").val();
$.ajax({
url : "GeneratePdfFromForm?itemId="+itemId+"&quantityOrdered="+quantityOrdered
})
.done(function(){alert("Success!");})
.fail(function(){alert("Failure!");});
}
</script>
My answer is using jQuery, which is a JavaScript library that simplifies AJAX and DOM manipulation. However, this technique is doable with other JavaScript libraries (or even without a library).
On the server side, let's have an ASP.NET Web API function that can handle that AJAX Post.
[Route("GeneratePdfFromForm")]
public static void GeneratePdfFromForm(string itemId, int quantityOrdered)
{
Debug.WriteLine("Received itemId {0} and quantity {1}", itemId, quantityOrdered);
byte[] pdf = GeneratePDF(itemId, quantityOdered); //you'll need a function called GeneratePDF that can generate your PDF based on the parameters, probably using a library like iTextSharp.
//now do you want with the PDF byte array
}
So that's how you'd generate the PDF. You could return it from the GeneratePdfFromForm() function back to the client. But since that's potentially a long running task, you should probably implement it in the background using something like Hangfire, then when the PDF is ready you'd present it to the client for download (perhaps using SignalR or jQuery AJAX polling to alert the client of when the PDF is ready).
I was passing data from the client side to the server side via query string. You could instead create a class to represent the parameters for your PDF generation, then pass that form the client side to the server side via jQuery AJAX's data parameter.
If you really want to post the entire HTML from the client side to the server, you could so something like this:
var html=$("html").html();
$.ajax({
url: <your url here>,
data: html,
contentType: "text/html"
});
However, I'm willing to bet the actual HTML isn't what you care about for generating the PDF, but rather the selected values from some client side form. The actual HTML would include everything on the client side, including navigation menus, scripts etc. You could post a subset of the HTML using a different selector (ex: $("#OrderDiv").html()), which is a technique some people use to generate PDF's. But I think it's much cleaner to decouple your HTML intended for the browser from the way the PDF is generated, so that changes to your site don't mess up the PDF. You can then use the PDF creating library's capabilities to build the PDF rather than using HTML.