Можно ли сохранить HTML-страницу в формате PDF с использованием JavaScript или jquery?
Подробно:
Я создал одну HTML-страницу, содержащую таблицу. Он имеет одну кнопку "сохранить как PDF". Если пользователь нажимает эту кнопку, то эта HTML-страница должна конвертироваться в формате PDF.
Возможно ли использование JavaScript или jquery?
Да, используйте jspdf Для создания PDF файла.
Затем вы можете превратить его в URI данных и вставить ссылку на скачивание в DOM
Тем не менее, вам нужно будет написать преобразование HTML в pdf самостоятельно.
Просто используйте печатные версии вашей страницы и позвольте пользователю выбирать, как он хочет распечатать страницу.
Изменить: видимо, он имеет минимальную поддержку
Таким образом, ответ - написать свой собственный PDF-писатель или попросить существующего PDF-писателя сделать это за вас (на сервере).
Я его очень легко сделать с javascript. Надеюсь, этот код вам пригодится.
Вам понадобится библиотека JSpdf.
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
// This code is collected but useful, click below to jsfiddle link.
</script>
Вот как бы я это сделал, его идея не пуленепробиваемая, вам нужно ее изменить
Вы можете использовать Phantomjs. Загрузите здесь и используйте следующий пример для проверки функции преобразования html- > pdf https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js
Пример кода:
phantomjs.exe examples/rasterize.js http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html sample.pdf
Это может быть поздний ответ, но это лучше всего: https://github.com/eKoopmans/html2pdf
Чистая реализация javascript. Позволяет указать только один элемент по идентификатору и преобразовать его.
Короче: нет. Первой проблемой является доступ к файловой системе, которая по умолчанию в большинстве браузеров по умолчанию не установлена. Современные браузеры иногда поддерживают минималистичное хранилище в виде базы данных, или вы можете попросить пользователя включить доступ к файлам.
Если у вас есть доступ к файловой системе, тогда сохранение в HTML не так сложно (см. файл файл в документации JS), но PDF не так прост. PDF - довольно продвинутый файловый формат, который действительно плохо подходит для Javascript. Он требует, чтобы вы записывали информацию в типы данных, не поддерживаемые непосредственно Javascript, такие как слова и квадратики. Вам также необходимо предварительно определить систему поиска в словаре, которая должна быть сохранена в файле. Я уверен, что кто-то может заставить его работать, но усилия и время будут лучше потрачены на изучение С++ или Delphi.
Экспорт HTML, однако, должен быть возможен, если пользователь предоставляет вам неограниченный доступ
Существует еще один очень очевидный и простой способ конвертировать HTML в PDf с использованием JavaScript: для этого используется онлайн-API. Это будет нормально работать, если вам не нужно делать конверсию, когда пользователь отключен.
FreeHtmlToPdf.com - это один из вариантов, который имеет хороший API. Я уверен, что вы можете найти альтернативы (например, PdfMage, который, очевидно, имеет свой собственный API, но не передает его протокол).
Для FreeHtmlToPdf API у вас будет что-то вроде этого:
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "http://freehtmltopdf.com");
var hiddenField = document.createElement("input");
hiddenField.setAttribute("name", "html");
hiddenField.setAttribute("value", "<html><body>Hi there!</body></html>");
form.appendChild(hiddenField);
hiddenField = document.createElement("input");
hiddenField.setAttribute("name", "baseurl");
hiddenField.setAttribute("value", "http://localhost");
form.appendChild(hiddenField);
hiddenField = document.createElement("input");
hiddenField.setAttribute("name", "convert");
hiddenField.setAttribute("value", "");
form.appendChild(hiddenField);
document.body.appendChild(form);
form.submit();
Да. Например, вы можете использовать решение https://grabz.it.
Он получил Javascript API, который можно использовать разными способами, чтобы захватить и обработать скриншот. Чтобы использовать его в своем приложении, вам нужно сначала получить ключ и секрет приложения и download бесплатный Javascript SDK.
Итак, рассмотрим простой пример его использования:
//first include the grabzit.min.js library in the web page
<script src="grabzit.min.js"></script>
//include the code below to add the screenshot to the body tag
<script>
//use secret key to sign in. replace the url.
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.google.com").Create();
</script>
Затем просто подождите немного, и изображение будет автоматически отображаться внизу страницы, без необходимости перезагрузки страницы.
Это самый простой. Дополнительные примеры с обработкой изображений, прикреплением скриншотов к элементам и т.д., Проверьте документацию.
$('#cmd2').click(function() {
var options = {
//'width': 800,
};
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML($("#content2"), -1, 220, options, function() {
pdf.save('admit_card.pdf');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<div id="content2" style="background: #fff;border-bottom: 1px solid #ffffff;">
<div class="tokenDet" style="padding: 15px;border: 1px solid #000;width: 80%;margin: 0 auto;position: relative;overflow: hidden;">
<div class="title" style="text-align: center;border-bottom: 1px solid #000;margin-bottom: 15px;">
<h2>Entrance Exam Hall Ticket</h2>
</div>
<div class="parentdiv" style="display: inline-block;width: 100%;position: relative;">
<div class="innerdiv" style="width: 80%;float: left;">
<div class="restDet">
<div class="div">
<div class="label" style="width: 30%;float: left;">
<strong>Name</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>Santanu Patra</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>D.O.B.</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>17th April, 1995</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Address</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>P.S. Srijan Corporate Park, Saltlake, Sector 5, Kolkata-91</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Contact Number</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>9874563210</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Email Id</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>[email protected]</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Parent(s) Name</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>S. Patra</span><br /><span>7896541230</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Exam Center</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>Institute of Engineering & Management</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Hall Number</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>COM-32</span>
</div>
</div>
</div>
</div>
<div class="sideDiv" style="width: 20%;float: left;">
<div class="atts" style="float: left;width: 100%;">
<div class="photo" style="width: 115px;height: 150px;float: right;">
<img src="images/candidateImg.gif" style="width: 100%;"/>
</div>
<div class="sign" style="position: absolute;bottom: 0;right: 0;border-top: 1px dashed #000;left: 80%;text-align: right;">
<small>Self Attested</small>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="btn btn-info" id="cmd2">Download Token</button>Гораздо проще и надежнее конвертировать HTML в pdf сервер. Мы используем Google Puppeteer. Это хорошо поддерживается с обертками для любого языка на стороне сервера по вашему выбору. Puppeteer использует Chrome без головы для создания скриншотов и/или файлов PDF. Это избавит вас от головной боли, особенно если вам нужно создавать сложные PDF файлы с таблицами, изображениями, графиками, несколькими страницами и т.д.
Я использовал jsPDF и библиотеку dom-to-image для экспорта HTML в PDF.
Я публикую здесь как ссылку, к которой относятся.
$('#downloadPDF').click(function () {
domtoimage.toPng(document.getElementById('content2'))
.then(function (blob) {
var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
pdf.save("test.pdf");
});
});
Я думаю Нет, потому что JavaScript не может записывать на диск вам следует отправить страницу на сервер и сгенерировать файл pdf, после чего клиент загрузит его.