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. $.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.

Step 02

Following is the server side C# code. We have to set relevant headers for the response.
That's it. As soon as the browser agent detects the response header as "application/pdf" it will directly download the pdf document. 

Cheers!

Comments

  1. AnonymousJuly 12, 2019 at 6:29 AM

    This comment has been removed by the author.

    ReplyDelete
  2. Parul PathakMay 26, 2021 at 5:00 AM

    I think you did an dbrau ba 3rd year result awesome job explaining it. Sure beats having bu ba final year result to research it on my own. Thanks

    ReplyDelete
  3. Bollywood HungamaJune 19, 2021 at 4:27 AM

    Great post. Thanks for sharing your brain. sooryavanshi release date Check mine out sometime jungle cruise full movie download 720p

    ReplyDelete
  4. fancieulshaferFebruary 26, 2022 at 2:09 PM

    Bonus Codes 2021 - BonusBets777
    For the best bonus codes 1xbet download and promotions, you need to keep in mind 실시간 배당 that the game can be played for free 22bet or for real money without any risk, 1x bet all without risk ibet789 sports betting asian handicap

    ReplyDelete

Post a Comment

Popular posts from this blog

Dependency Injection in ASP.NET MVC 5 with StructureMap

Dependency Injection(DI) is a design pattern that let you write loosely coupled testable code. Typically your classes depend on other classes. Take a look at the following example. The above example shows the " HomeController " of an asp.net mvc application. Within the index method, you can see that it requires to create an instance of " Student " class to get the full name of a student. It is very clear that the Index method is tightly coupled with the Student class.  This is a disadvantage when it comes to testing HomeController . Suppose that you have other methods, with similar types of class dependencies. So, each time when you test the code, you have to pass an actual instance Student class. This is tedious. You don't have the luxury of passing a fake student class to easily test your controllers.  So how do we decouple the Student class from HomeController? This is where DI comes in handy. You can inject dependencies in several ways. Today i will sho
Read more

Real-time web with Node.js & Socket.io

Image
If you are a .net developer, you may be familiar with ASP.net SignalR for real-time web development. It's one of the coolest libraries for ASP.net that allows bi-directional communication between a server and a client. For more details refer  http://www.asp.net/signalr .  This blog post is an intro to use Node.js and Socket.io to achieve real-time web communication with pure JavaScript using a simple chat program example. Socket.io is a library that makes our lives easy to work with web sockets. Of course, in the Javascript world, there are hundred other libraries available to implement web sockets,  examples .  But i like the simplicity of Socket.io.  Step 01 : Setting up Node.js Depending on the operating system you are using, download Node.js from the official site  here . Installation process of both Windows and OSX is pretty much the same. Double click the setup file and follow the straightforward instruction. For Linux, either you can do
Read more

First Look at AngularJS 2.0

Image
AngularJS 2.0 developer preview has been released! This blog post is to experience the new features in the framework with a simple angular2 application. Heads Up : AngularJS 2.0 is written in TypeScript. TypeScript is a super-set of ES6 which is a super-set of ES5 which is currently the browsers fully supported version of JavaScript.  So when writing angular2 components, we can use choose among TypeScript, ES6, ES5 or Dart if you will. For this blog post I use TypeScript. Please refer  5 Min Quick Start Guide  to setup angular2 development environment. Once you have setup the environment and followed the guide, you will be able to see a similar result as follows. Now let's add few more features to this. We will create a shopping list where a user can view the list, add a new item or remove a item from the list. So to begin, let's create the listItems array. Change the app.ts file as follows. Let's create the list.html file which is the view for this c
Read more