PDF direct download with jQuery

Hi guys,

There was a requirement in my project that needs to download a pdf out of html content. After some research we found that princeXML would be a good candidate for html to pdf conversion process as it provides a good api for pdf designing as we want.(Although we had to purchase a license). This blog post isn't about the princeXML but the front-end and back-end implementation of pdf direct download.

Challenges

1. The HTML content that we wanted to covert to a pdf was quite big. Due to various browser limitations on GET request's length, we couldn't just use  a simple GET request.
2. Even though we have set up the correct response headers for our POST request browser seems to have not downloading the content as a pdf. (Ajax is not suitable).

So the options we had were, either to use a hidden iframe submission or build a dynamic form and submit it on the fly. We chose form submission method as it's the best option.

Step 01

This is the client side JavaScript code.

	var createPdfReport = function () {
	var reportData = $(".report-data").html();
	var data = {
	htmldata: reportData,
	path: "some more data"
	}
	$.download("apps/reports", data);
	};

view raw index.js hosted with ❤ by GitHub

$.download("apps/reports",data) looks like an ajax request but it's actually not. This is coming from a simple plugin that we have used. The following plugin allows you to make a request that returns a file in a similar syntax to jQuery's native Ajax functions.

	$.download = function (url, data, method) {
	if (url && data) {
	data = typeof data == 'string' ? data : jQuery.param(data);
	var inputs = '';
	jQuery.each(data.split('&'), function () {
	var pair = this.split('=');
	inputs += '<input type="hidden" name="' + pair[0] + '" value="' + pair[1] + '" />';
	});
	jQuery('<form action="' + url + '" method="' + (method || 'post') + '">' + inputs + '</form>').appendTo('body').submit().remove();
	};
	};

view raw plugin.js hosted with ❤ by GitHub

Step 02

Following is the server side C# code. We have to set relevant headers for the response.

	public class HomeController : Controller
	{
	[AllowAnonymous]
	[HttpPost]
	public void PdfReport([FromBody] string path, [FromBody] string htmldata)
	{
	HttpResponse response = System.Web.HttpContext.Current.Response;
	response.Clear();
	response.ClearHeaders();
	response.Clear();
	response.AddHeader("Content-Type", "application/pdf");
	// pdfBytes come from the prince html string conversion
	response.AddHeader("Content-Length", pdfBytes.Length.ToString());
	response.AddHeader("Content-Disposition", "attachment; filename=report.pdf");
	response.BinaryWrite(pdfBytes);
	response.Flush();
	response.End();
	}

view raw HomeController.cs hosted with ❤ by GitHub

That's it. As soon as the browser agent detects the response header as "application/pdf" it will directly download the pdf document. 


Cheers!