Save the particular div in PDF format onclick using Jquery | 2my4edge

18 November 2015

Save the particular div in PDF format onclick using Jquery

Here i'm going to explain you one the most interesting and useful tutorial, that is Save or download the particular div as in the PDF format onclick using jsPDF jquery file. This is very simple one. i already showed you one tutorial to save and print the whole web page. here for the particular div. let see the code.

save and download the web page as pdf format using jquery

DOWNLOAD         LIVE DEMO            LIVE DEMO 1 

Here we need add jquery file. for this save the particular div place as in .pdf format using jquery. for more reference click here

HTML CODE
<h1 align="center" id="download" class="glyphicon glyphicon-download" 
style="cursor:pointer;" title="Click to Download"></h1>


<section id="posts-landing">

.
.
.
.
.
.
.................... Content goes here, this thing will be pdf format ................
.
.
.
.
.
.


</section>


JQUERY AND SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript' src="jspdf.debug.js"></script>
<script>
$(document).ready(function() {
$('#download').click(function () {
var pdf = new jsPDF('p', 'pt', 'letter')
, source = $('#posts-landing')[0]
, specialElementHandlers = {
    '#bypassme': function(element, renderer){      
        return true
    }
}

margins = {
    top: 60,
    bottom: 60,
    left: 40,
    width: 522
  };
  // all coords and widths are in jsPDF instance's declared units
  // 'inches' in this case
pdf.fromHTML(
    source // HTML string or DOM elem ref.
    , margins.left // x coord
    , margins.top // y coord
    , {
        'width': margins.width // max width of content on PDF
        , 'elementHandlers': specialElementHandlers
    },
    function (dispose) {
      // dispose: object with X, Y of the last line add to the PDF
      //          this allow the insertion of new lines after html
        pdf.save('Downloaded.pdf');
      },
    margins
  )
});

    });
</script>

That's all. make sure that div id or class should be same and we have to add that jquery files too. thanks for this attention. Keep visiting for more tutorial like this.






RELATED POSTS :




11 comments:

  1. PHP is strong and advanced laguage and its supports many databases. Hire PHP developers from a skilled and experienced PHP web development company which provides excellent PHP development services.

    ReplyDelete
  2. Awesome post bro I have used this code. Thank you

    ReplyDelete
  3. Не понимает язык RUS

    ReplyDelete
  4. НЕ РАБОТАЕТ С РУССКИМ ТЕКСТОМ ПЛОХО

    ReplyDelete
  5. nice tutorial, but how i can save particular div in .png(image) format, any help will be appreciated .....

    ReplyDelete
  6. Check your demo's.
    Error: jsPDF is not defined

    ReplyDelete
  7. protocol "blob" is unknown??

    ReplyDelete
  8. Thank you so much. I'm PBWijerathna from Sri Lanka

    ReplyDelete
  9. You are simply the best! its works awesome! simple/fast/great!

    ReplyDelete
  10. This is an extremely valuable capacity since you can include, erase, and reorder the JPG pictures lastly convert them into a solitary PDF document. https://www.altoconvertpngtopdf.com/

    ReplyDelete

^