Как использовать html2canvas и jspdf для правильного и простого экспорта в pdf

В настоящее время я работаю над программным обеспечением для управления школами, которое обычно требует экспорта содержимого html, содержащего data tables и div tag.

Я пробовал все возможные способы написать код, который сможет экспортировать мои html-данные в хорошем смысле, с предпочтительным css. После проверки некоторых вопросов и ответов здесь я попытался использовать spdf, но не повезло.

Он продолжает уничтожать выравнивание моей таблицы, а затем я читал о html2canvas, но для его реализации с jspdf была моя проблема, я хотел бы захватить контент, если тег div с html2canvas затем отправит холст в jspdf, чтобы экспортировать холст в формате pdf.

Вот мой код ниже:

<script src="assets/js/pdfconvert/jspdf.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.from_html.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.split_text_to_size.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.standard_fonts_metrics.js">  </script>
<script src="assets/js/pdfconvert/jspdf.plugin.addhtml.js"></script>
<script src="assets/js/pdfconvert/filesaver.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.cell.js"></script>
<script src="assets/js/pdfconvert/html2canvas.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.addimage.js"></script>

вот код js

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
pdf.save('Test.pdf');
});

Ответы

Ответ 1

Я сделал для вас jsfiddle.

 <canvas id="canvas" width="480" height="320"></canvas> 
      <button id="download">Download Pdf</button>


        html2canvas($("#canvas"), {
            onrendered: function(canvas) {         
                var imgData = canvas.toDataURL(
                    'image/png');              
                var doc = new jsPDF('p', 'mm');
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample-file.pdf');
            }
        });

jsfiddle: http://jsfiddle.net/rpaul/p4s5k59s/5/

Протестировано в Chrome38, IE11 и Firefox 33. Кажется, что есть проблемы с Safari. Тем не менее, Андрей получил работу в Safari 8 на Mac OSx, переключившись на JPEG из PNG. Для получения дополнительной информации см. Его комментарий ниже.