i've been looking converting html page pdf on client side. found method javascript using html2canvas parse dom , calculate styles applied, , jspdf create pdf. link page - http://www.choosenj.com/html-to-pdf/
i'm struggling couple issues need resolved:
the canvased image rendering whole page single pdf, there way split long image multi page pdf?
currently panels load scroll down, there way load entire page when clicking "create pdf button"?
if wanted canvas panels had checkbox selected, how edit js?
here code below (note: include html2canvas , jspdf javascript libraries):
// html pdf $(window).load(function(){ var form = $('#content'), cache_width = form.width(), a4 =[ 850, 2000]; // a4 size paper width , height $('#create_pdf').on('click',function(){ $('body').scrolltop(0); createpdf(); }); //create pdf function createpdf(){ getcanvas().then(function(canvas){ var img = canvas.todataurl("image/png"), doc = new jspdf({ unit:'px', format:'a4' }); doc.addimage(img, 'jpeg', 0, 0, 180, 630); doc.save('choosenj.pdf'); form.width(cache_width); }); } // create canvas object function getcanvas(){ form.width(cache_width).css('max-width','none'); return html2canvas(form,{ imagetimeout:2000, removecontainer:true }); } }()); <!-- #content --> <div id="content"> <div class="content_wrapper clearfix"> <!-- .main content --> <div class="sections_group"> <div class="entry-content" itemprop="maincontentofpage"> <div style="margin: 10px 0;"><a id="create_pdf" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-flat vc_btn3-color-green" style="margin:0 20px;cursor:pointer;color:#fff;font-family: 'franklingothicstd-extracond', arial, sans-serif !important;text-transform: uppercase !important;">create pdf</a> </div> <?php while ( have_posts() ){ the_post(); // post loop } ?> </div> <!-- contact section--> <?php wp_reset_postdata(); ?> <?php get_template_part('contact-us') ?> </div> </div> </div> any insight appreciated,
chris g
Comments
Post a Comment