export pdf

export pdf

by oktaviardi pratama

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<div>
    <button class="btn" id="export">exprot pdf</button>
  </div>
  <div id="pdf-render" class="bg-black">
    <div id="pdf-wrap">
      <div class="container-fluid px-0">
       <div class="header-pdf">
         <div class="row">
           <div class="col-xs-8">
            <span class="label-dijual">
              Dijual
            </span>
            <h3 class="harga">
              Rp. <span>2,300,000,000</span> Nego
            </h3>
           </div>
           <div class="col-xs-4 text-right">
             <img class="logo" src="./logo.png" width="160" alt="">
           </div>
         </div>
       </div>
       <div class="content-pdf">
        <div class="figure">
          <img src="./foto.png" class="w-100 feature-image" alt="">
        </div>
        <div class="title-section">
          <span class="d-block web">
            erasky-bekasi.com
          </span>
          <h3 class="title">
            Dijual Rumah di Cluster Heliconia Extention
          </h3>
          <span class="d-block location">
            Tarumajaya, West Java, Indonesia
          </span>
        </div>
        <div class="detail-property">
          <div class="box-wrap">
            <div class="rh_property__row rh_property__meta_wrap">
              <div class="rh_property__meta prop_bedrooms">
                <span class="rh_meta_titles">
                  Kamar Tidur </span>
                <div>
                  <svg class="rh_svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <defs>
                    </defs>
                    <path
                     ...

CSS

body{background-color:#000}#pdf-wrap{padding-top:30px;background-color:#fff;z-index:10;width:1240px;margin:0 auto}#pdf-wrap .header-pdf{margin-bottom:20px}#pdf-wrap .header-pdf .label-dijual{text-transform:uppercase;font-size:81px;line-height:97px;background-color:#d30228;color:#fff;display:inline-block;padding-left:60px;padding-right:30px;position:relative;height:100px}#pdf-wrap .header-pdf .label-dijual:after{content:"";width:0;height:0;right:-80px;top:0;border-top:100px solid transparent;border-bottom:0px solid transparent;border-left:80px solid #d30228;position:absolute}#pdf-wrap .header-pdf .harga{color:#0c398c;font-size:56px;line-height:67px;padding-left:60px;margin-bottom:0;margin-top:35px;font-weight:bold}#pdf-wrap .header-pdf .logo{margin-right:60px}#pdf-wrap .content-pdf{padding-bottom:30px}#pdf-wrap .content-pdf .feature-image{width:100%}#pdf-wrap .content-pdf .title-section{background-color:#efefef;padding:25px 60px}#pdf-wrap .content-pdf .title-section .title{font-size:48px;line-height:58px;margin:5px 0}#pdf-wrap .content-pdf .title-section .web{color:#0c398c;font-size:18px;line-height:22px;margin-bottom:0;font-weight:bolder}#pdf-wrap .content-pdf .title-section .location{font-weight:400;font-size:21px;line-height:25px;color:#000}#pdf-wrap .content-pdf .detail-property{padding:30px;width:60%}#pdf-wrap .content-pdf .detail-property .box-wrap{margin-bottom:15px}#pdf-wrap .content-pdf .detail-property .box-wrap:last-child{margin-bottom:0}#pdf-wrap .content-pdf .detail-property .rh_property__meta{display:inline-block;margin-right:20px}#pdf-wrap .content-pdf .detail-property p{margin-bottom:0}#pdf-wrap .content-pdf .detail-property ul{margin-bottom:0;padding-left:0;list-style:none}#pdf-wrap .content-pdf .detail-property ul li{display:inline-block;width:30%}#pdf-wrap .content-pdf .detail-property .rh_property__features svg{width:15px;margin-right:10px;vertical-align:middle}#pdf-wrap .footer-pdf{height:120px;color:#fff;background-color:#0c398c;padding:30px...

JavaScript

jquery
$(function() {
  $("#export").click(function(){
	
    html2canvas(document.getElementById("pdf-render"), {
        onrendered: function(canvas) {
  
            var imgData = canvas.toDataURL('image/png');
            console.log('Report Image URL: '+imgData);
            // var doc = new jsPDF('p', 'mm', [297, 210]); //210mm wide and 297mm high
            // doc.viewerPreferences({'FitWindow': true}, true);
            // doc.addImage(imgData, 'PNG', 10, 10);
            // doc.save('sample.pdf');

            var wid = 0
            var hgt = 0
            var img = canvas.toDataURL("image/png", wid = canvas.width, hgt = canvas.height);
            var hratio = hgt/wid
            var doc = new jsPDF('p','pt','a4');
            var width = doc.internal.pageSize.width;    
            var height = width * hratio
            doc.addImage(img,'JPEG',20,20, width, height);
            doc.save('Test.pdf');
        }
    });
  
  });
})