将图片插入标头jsPDF

时间:2020-07-03 19:43:43

标签: javascript jspdf

我一直在努力使它工作几个小时。我想使用jsPDF在pdf下载文件的顶部显示图片。

<div class="headingImage" >
  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAJYAAABECAYAAABj98zGAAAPyElEQVR42u1dC5yWUxo/o5uK........" alt="Logo" />
      </div>
<div class="heading">

  <h3> New ID Information </h3>

</div>

  <hr class="userLoginHR">
<div id="userInfo">
  <ul class="list-group">
  <?php while ($stmt->fetch()) {

echo "<li class='list-group-item'><b>Employee Name:</b> " . $employee_name ;
echo "</li><li class='list-group-item'><b>Default Password:</b> " . $default_password ;
echo "</li><li class='list-group-item'><b>Email ID:</b> " . $email_id ;
echo "</li><li class='list-group-item'><b>Fios ID:</b> " . $fios_id ;
echo "</li><li class='list-group-item'><b>Native Worker ID:</b> " . $native_worker_id ;
echo "</li><li class='list-group-item'><b>SSO ID:</b> " . $ssoid ;
echo "</li><li class='list-group-item'><b>Datascape ID:</b> " . $datascape_id ;
echo "</li><li class='list-group-item'><b>Datascape Password:</b> Verizon123 "  ;



?>

  <?php } ?>
<div id="editor"></div>
</div><br>
<button type="button" class="btn btn-primary" id="cmd">Download</button>
</div>


<script type="text/javascript">
var doc = new jsPDF({
  orientation: 'landscape',

})
var header = function (data) {
    doc.setFontSize(18);
    doc.setTextColor(40);
    doc.setFontStyle('normal');
    doc.addImage(base64_source, 'PNG', data.settings.margin.left, 20, 50, 50);
    //doc.addImage(image base64_source, 'image format', logo_sizes.centered_x, _y, logo_sizes.w, logo_sizes.h);
    //Image must be Base64 encoded
};
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
  doc.fromHTML($('.headingImage').get(0), 15, 15, {
      'width': 500,
          'elementHandlers': specialElementHandlers
  });
  doc.fromHTML($('.heading').html(), 15, 15, {
      'width': 500,
          'elementHandlers': specialElementHandlers
  });
    doc.fromHTML($('#userInfo').html(), 30, 30, {
        'width': 500,
            'elementHandlers': specialElementHandlers
    });
    doc.save('EmployeeLoginInfo.pdf');
});
</script>

我遵循了我在这里可以找到的每条指南,以了解如何使其正常工作,但似乎没有什么对我有用。任何人都有阅读或看东西的建议吗?

0 个答案:

没有答案