Какой PDF принтер поддерживает верстку с несколькими таблицами и форматированием?

Question

[Егор Поляков]

Задача: из HTML верстки печатать сертификат в PDF путем event onClick с переменными пользователей (из формы заявки).
Шаблон есть: https://docs.google.com/document/d/136cL5WaMl7DrC6...

Пробовали делать через jsPDF. Есть неск. проблем:
1. Таблицы с рамками. Нужно без рамок (border:0 или border:1px solid #fff
2. Не поддерживает div {display:inline-block;...}.
3. Не подгружается шрифт из библиотеки (вкл. Google Fonts). Нужно, допустим, Lora или Cambria.

Фактически в документе на выходе 1 стр. в PDF, с форматированием, неск. таблиц или div блоков, включая изображения. Как это лучше организовать и какой принтер поддерживает верстку с несколькими таблицами и форматированием?

Answer 1

[ThunderCat]

html2canvas + любой пдф строитель на js/php. Делаете скрин нужной страницы, пихаете в пдф - профит.

Comments

[Егор Поляков]

Вот детальный код процессинга: надо это как-то состыковать чтобы сохранялось PDF (user data в шаблоне) в папку и отправлять на support@ ссылку в теле письма.

<?php
							$image = trim($_POST['image']);			
							$fullname = trim($_POST['fullname']);
							$organization = trim($_POST['organization']);
							$location = trim($_POST['location']);		
							$paypal = trim($_POST['paypal']);
							
							$today = date("Ymd");
							$rand = strtoupper(substr(uniqid(sha1(time())),0,4));
							$unique = $today . $rand;

							// указываем адрес отправителя, можно указать адрес на домене Вашего сайта
							$fromMail = '[e-mail]';
							$fromName = 'Support';

							// Сюда введите Ваш email
							$emailTo = '[e-mail]';
							$subject = 'Order the extended license №'.$unique .'';
							$subject = '=?utf-8?b?'. base64_encode($subject) .'?=';
							$headers = "Content-type: text/plain; charset=\"utf-8\"\r\n";
							$headers .= "From: ". $fromName ." <". $fromMail ."> \r\n";

							// тело письма
							$body = "Order the extended license №$unique\n\nChosen image: $image\n\nView in base: https://docs.google.com/...\n\nFull name: $fullname \n\nCompany: $organization\n\nLocation: $location\n\n PayPal: $paypal\n\n";

							if (strlen($paypal) > 0) {
								$mail = mail($emailTo, $subject, $body, $headers, '-f'. $fromMail );
							}
							$content = '<div id="extendedLicenseData" style="display:none;width:530px;height:822px;padding:30px;font-family:Times New Roman;line-height:1.5em" align="center">
								<p align="center"><img src="/upload/tmp/license-header.png" border="0" width="530px" height="85px" align="center"></p>
								<br><br>
								<p align="center"><br><img src="/upload/tmp/h1-extended-license-for-logotype.png" border="0" width="530px" height="32px" align="center"></p>
								<p align="center">Date of registration: <b>'.$today.'</b></p>
								<br>
								<p align="left">
									<b>DESCRIPTION</b><br><img src="https://bundlespace.com/search/i/catalog/premium-graphics/abstract-flowers/watermark/twirl-flower-bud.png" style="margin:0 20px 0 20px" width="150" height="150" alt="" border="0" align="right">Full rights for commercial use of the Image '.$image.' in this Extended License is goes from designer Egor Polyakov (Saint-Petersburg, Russia) to new Owner '.$fullname.' ('.$location.') for logotype of the company.		
								</p>
								<p align="left">Extended license: <b>'.$unique.'</b></p>
								<br>
								<p align="left"><b><small>LEGAL USE OF LOGOTYPE FOR OWNER</small></b><br><small>BundleSpace(.com) confirm rights of&nbsp;Legal Owner for&nbsp;use of&nbsp;created logotype at&nbsp;all&nbsp;conditions of&nbsp;Extended License.</small></p>		
								<p align="left"><b><small>DESIGNER:</small></b> Egor Polyakov</p>
								<p align="left"><b><small>NEW OWNER OF IMAGE:</small></b><br><b>'.$fullname.'</b></p>
								<br><br><br><br><br>
								<small align="left">
									<p align="left"><b>NOTICES</b><br>1.&nbsp;Extended license for&nbsp;vector image is&nbsp;the&nbsp;right to&nbsp;commercial use of&nbsp;this&nbsp;image as&nbsp;logotype (emblem) for&nbsp;multi&nbsp;copied printing and&nbsp;digital products.<br>2.&nbsp;Extended license is&nbsp;not&nbsp;connected with&nbsp;Madrid&nbsp;Trademark Registration&nbsp;System.</p>
								</small>	
							</div>'
							
						?>
						<div class="helloBlock" id="registerCard" style="height:auto;background:#f4f4f4">
							<h1>Payment for<span class="hidden">&nbsp;registration the</span>&nbsp;Extended license</h1>
							<iframe src="/processing/first-screen.html" width="100%" height="350px" frameborder="0" scrolling="no" class="screenView"></iframe>							
						</div>
						<script type="text/javascript">
							function demoFromHTML() {
								var pdf = new jsPDF('p', 'pt', 'letter');				
								
								// source can be HTML-formatted string, or a reference
								// to an actual DOM element from which the text will be scraped.
								source = $('#extendedLicense')[0];

								// we support special element handlers. Register them with jQuery-style 
								// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
								// There is no support for any other type of selectors 
								// (class, of compound) at this time.
								specialElementHandlers = {
									// element with id of "bypass" - jQuery style selector
									'#bypassme': function(element, renderer) {
										// true = "handled elsewhere, bypass text extraction"
										return true
									}
								};
								margins = {
									top: 30,
									bottom: 30,
									left: 40,
									right: 40,
									width: 530
								};			

								pdf.setProperties({
									title: 'Extended license for vector image',
									author: 'BundleSpace(.com)',
									keywords: 'generated, javascript, web 2.0, ajax',
									creator: 'BundleSpace(.com)'
								});
								
								pdf.fromHTML(
										source, // HTML string or DOM elem ref.
										margins.left, // x coord
										margins.top, {// y coord
											'width': margins.width, // max width of content on PDF
											'elementHandlers': specialElementHandlers
										},
								function(dispose) {
									pdf.save('extended-license-for-vector-image.pdf');
								}
								, margins);
							}
						</script>						
						<button onclick="javascript:demoFromHTML()" style="display:none">Print license</button>

[ThunderCat]

Егор Поляков, зачем мне это? Чисто ваше решение, которое мне как бы не интересно. Как сделать я уже сказал. Реализацию кода я уж точно вам делать не буду. В чем проблема у вас? Получить картинку с фронта? Вставить в пдф? Сохранить в пдф?

[Егор Поляков]

ThunderCat, зачем использовать html2canvas? Единая картинка (слепок) с фронта не нужна (как я понимаю). Ведь по сути то мне нужно печатать ... со стилями и картинками, достаточно подключить стили к jsPDF и вывести в печать файла.

[ThunderCat]

Егор Поляков, нет. Во первых определитесь что вам нужно - пдф документ на бэкенде для отправки почтой, или пдф документ отдавать клиенту со странички? В обоих случаях есть куча вариантов, но все имеют нюансы... А jsPDF вообще как бы не для создания нормальной пдф из хтмл... Самый простой способ получить хтмл-снимок в пдф я уже написал. Если нужно сделать это на бэке - ставите хеадлесс хром и делаете принт в пдф файл, далее по вкусу. Ну или на фронте создаете картинку как я написал и аяксом отправляете на бэк, и там уже лепите пдф.
И задачу четче описывайте, а то на размытый вопрос обычно и будет туманный ответ...