Cоздание pdf-файла - javascript jsPDF html2canvas


Задача: при заполнении формы на сайте, отдавать посетителю заполненную форму в pdf

в html подключаем скрипты
Важно!
jspdf - умеет формировать pdf, но не умеет работать с киррилицей
поэтому сначала формируем картинку с помощью html2canvas, а потом ее пихаем в jspdf

js
//спец класс для печати добавляю
$('#allData-container').addClass('for-pdf');

//высоту картинки рассчитываю 
var h = $('#allData-container').height()/5.789; 

//скроллим вверх
window.scrollTo(0,0);  

html2canvas(document.getElementById("allData-container"), {
    dpi: 300, //  300 DPI
    scale: 3, // Adjusts your resolution   
})
.then(
   function(canvas) {                   
       var img = canvas.toDataURL("image/jpeg", 1);
       var doc = new jsPDF('p', 'mm', [297, 210]);
       doc.addImage(img, 'JPEG', 10, 10, 190, h);
       doc.save('a4.pdf');
       $('#allData-container').removeClass('for-pdf'); //спец класс для печати убираю       
    }
);
css
.html2canvas-container { width: 3000px !important; height: 3000px !important; }

.html2canvas-container { width: 3000px !important; height: 3000px !important; }
.for-pdf{ 
   width: 1100px!important;
   min-width: 1100px!important;
}
.for-pdf #allData{
   max-width: 100%!important;
   
}
.show-for-pdf{
   display: none;
}          
.for-pdf .show-for-pdf{
   display: inherit;
}          
.for-pdf .hide-for-pdf{
   display: none;
}


.for-pdf .pdf-2{
    flex: 0 0 16.666667%!important;
    max-width: 16.666667%!important;
}
.for-pdf .pdf-3{
    flex: 0 0 25%!important;
    max-width: 25%!important;
}
.for-pdf .pdf-4{
    flex: 0 0 33.333333%!important;
    max-width: 33.333333%!important;
}
.for-pdf .pdf-5{
    flex: 0 0 41.666667%!important;
    max-width: 41.666667%!important;
}
.for-pdf .pdf-6{
    flex: 0 0 50%!important;
    max-width: 50%!important;
}
.for-pdf .pdf-7{
    flex: 0 0 58.333333%!important;
    max-width: 58.333333%!important;
}
.for-pdf .pdf-8{
    flex: 0 0 66.666667%!important;
    max-width: 66.666667%!important;
}
.for-pdf .pdf-9{
    flex: 0 0 75%!important;
    max-width: 75%!important;
}
.for-pdf .pdf-10{
    flex: 0 0 83.333333%!important;
    max-width: 83.333333%!important;
}
.for-pdf .pdf-11{
    flex: 0 0 91.666667%!important;
    max-width: 91.666667%!important;
}


Пояснения к js:
добавляю к div спец класс for-pdf, при котором:
  • ширина контента становится 1100,
  • скрываются лишние поля, элементы,
  • показывается шапка для pdf
рассчитываю высоту картинки 1100/190 = 5.789  (пропорционально не ставит автоматом, вытягивает)
где
  • 1100 - ширина контента на сайте
  • 190 - ширина контента в pdf
обязательно надо скроллить вверх, иначе вверху картинки появлялись пустоты, а низ обрезался


Пояснения к css:
  • чтобы влазил весь нужный контент, а не только то, что видно на экране в данный момент мы определяем ширину и высоту html2canvas-container. Не надо добавлять данный класс в ваш html, просто добавить строчку в css
  • у меня была верстка на bootstrap, чтобы корректно pdf создавался с мобильных и планшетов, я добавила доп классы for-pdf pdf-*