Как записать логотип и текущую дату в загруженный PDF с помощью html2canvas - PullRequest
Новая
       12

Как записать логотип и текущую дату в загруженный PDF с помощью html2canvas

0 голосов
/ 06 ноября 2018

Я использую jspdf для печати и загрузки содержимого div в формате pdf. Также в формате pdf мне нужно сделать снимок в левом верхнем углу страницы и текущую дату в верхнем правом углу страницы в качестве моего html. нужно использовать позицию и аддимацию внутри html2canvas. Я новичок в html2canvas, Может кто-нибудь помочь мне, пожалуйста. Вот код

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>

Сценарий 

$(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;
    });

    });

стиль 

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; }

1 Ответ

0 голосов
/ 07 ноября 2018

Попробуйте конвертировать ваше изображение в 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/

...