CODEWITHSUNDEEP
javascripthtmlhtml2canvas
carreankush
carreankush

Reputation: 651

How to capture logo and current date in downloaded pdf using html2canvas

I am using jspdf to print and download the content of div in pdf..Here also in pdf I need to capture image on top left of the page and current date on top right of the page as my html.May be its need to use position and addimage inside html2canvas. I am new to html2canvas,Can anyone help me please.Here is the code

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-md-12">
<div class="pull-left" id = "logo"><img src="logo.png" title="logo"></div>
<div class="pull-right" id = "date"></div>
</div>
<div id="content">
      <p>This is the element you only want to capture</p>   
       <p>This is the element you only want to capture</p>  
        <p>This is the element you only want to capture</p> 
         <p>This is the element you only want to capture</p>    
          <p>This is the element you only want to capture</p>   
          <p>This is the element you only want to capture</p>   
       <p>This is the element you only want to capture</p>  
        <p>This is the element you only want to capture</p> 
         <p>This is the element you only want to capture</p>    
          <p>This is the element you only want to capture</p>   
    </div>

    <button id="print">Download Pdf</button>
    <footer>This is the footer</footer>

script

$(document).ready(function() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();

if(dd<10) {
    dd = '0'+dd
} 

if(mm<10) {
    mm = '0'+mm
} 

today = mm + '/' + dd + '/' + yyyy;
$('#date').append(today);
      $('#print').click(function() {
     var currentPosition = document.getElementById("content").scrollTop;
      var w = document.getElementById("content").offsetWidth;
      var h = document.getElementById("content").offsetHeight;
     document.getElementById("content").style.height="auto";

      html2canvas(document.getElementById("content"), {

        dpi: 300, // Set to 300 DPI
        scale: 3, // Adjusts your resolution
        onrendered: function(canvas) {
          var img = canvas.toDataURL("image/jpeg", 1);
          var doc = new jsPDF('L', 'px', [w, h]);
          doc.addImage(img, 'JPEG', 0, 0, w, h);
          doc.addPage();
          doc.save('sample-file.pdf');
        }
      });
     document.getElementById("content").style.height="100px";
     document.getElementById("content").scrollTop = currentPosition;
    });

    });

style

body {
      background: beige;
    }

    header {
      background: red;
    }

    footer {
      background: blue;
    }

    #content {
      background: yellow;
      width: 70%;
      height: 100px;
      margin: 50px auto;
      border: 1px solid orange;
      padding: 20px;
      overflow-y:auto;
    }
    .html2canvas-container { width: 3000px !important; height: 3000px !important; }container { width: 3000px !important; height: 5000px !important; }

Upvotes: 2

Views: 1075

Answers (1)

FrancescoM
FrancescoM

Reputation: 65

Try to convert your image in base64

var src = 'data:image/png;base64,iVBORw0K.......'
//doc.addImage(src, 'PNG', x, y, w, h);
doc.addImage(src, 'PNG', 0, 240, 210, 57);

https://jsfiddle.net/q8u9jhro/2/

Upvotes: 1

Related Questions