Задача: при заполнении формы на сайте, отдавать посетителю заполненную форму в pdf
в html подключаем скрипты
js
css
Пояснения к js:
добавляю к div спец класс for-pdf, при котором:
где
Пояснения к css:
| Важно! jspdf - умеет формировать pdf, но не умеет работать с киррилицей поэтому сначала формируем картинку с помощью html2canvas, а потом ее пихаем в jspdf |
- jquery
- jspdf https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js
- html2canvas https://html2canvas.hertzen.com/dist/html2canvas.min.js
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'); //спец класс для печати убираю
}
);
|
.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 - ширина контента в pdf
Пояснения к css:
- чтобы влазил весь нужный контент, а не только то, что видно на экране в данный момент мы определяем ширину и высоту html2canvas-container. Не надо добавлять данный класс в ваш html, просто добавить строчку в css
- у меня была верстка на bootstrap, чтобы корректно pdf создавался с мобильных и планшетов, я добавила доп классы for-pdf pdf-*