javascript - 如何在其他 jsPdf 元素之间添加画布图像

Question

我已将特定<div>标签转换为<canvas>使用html2canvas，我需要将此转换后的画布图像与其他JsPdf元素（如Autotables文本）添加。

谢谢。

标签： javascriptangulartypescriptjspdfhtml2canvas

Answer 1

这是我在 jsfiddle http://jsfiddle.net/huynhsamha/q5w8pvdn/上的解决方案

您可以在 jsfiddle 上运行，它正在工作。这是代码片段。

const html2canvas = window.html2canvas;

$(document).ready(function() {
    
    $('#download').click(function() {
      html2canvas(document.body).then(function(canvas) {
        var imgData = canvas.toDataURL('image/png');              
        var doc = new jsPDF();
        doc.addImage(imgData, 'PNG', 10, 10);
        doc.save('file.pdf');
      });
    });
});

button {
  margin: 50px;
}

<p>The library has two sets of tests. The first set is a number of qunit tests that check that different values parsed by browsers are correctly converted in html2canvas. To run these tests with grunt you'll need phantomjs.</p>

<p>The other set of tests run Firefox, Chrome and Internet Explorer with webdriver. The selenium standalone server (runs on Java) is required for these tests and can be downloaded from here. They capture an actual screenshot from the test pages and compare the image to the screenshot created by html2canvas and calculate the percentage differences. These tests generally aren't expected to provide 100% matches, but while committing changes, these should generally not go decrease from the baseline values.</p>

<button id="download">Download PDF</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/html2canvas@1.0.0-alpha.12/dist/html2canvas.min.js"></script>
<script src="https://unpkg.com/jspdf@1.4.1/dist/jspdf.min.js"></script>