Как добавить изображение холста между другими элементами jsPdf - PullRequest
Новая
       10

Как добавить изображение холста между другими элементами jsPdf

0 голосов
/ 18 декабря 2018

Я преобразовал конкретный тег <div> в <canvas>, используя html2canvas, и мне нужно добавить это преобразованное изображение холста с другими JsPdf элементами, такими как Autotables и текстами.

Спасибо.

1 Ответ

0 голосов
/ 18 декабря 2018

Это мое решение на 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>
...