Можно ли сохранить HTML-страницу в формате PDF, используя JavaScript или jquery?

Question

Можно ли сохранить HTML-страницу как PDF, используя JavaScript или jquery?

В деталях:

Я сгенерировал одну HTML-страницу, которая содержит таблицу. Он имеет одну кнопку «Сохранить как PDF». Если пользователь нажимает эту кнопку, то HTML-страница должна быть преобразована в файл PDF.

Возможно ли использовать JavaScript или jquery?

Answer 1

Да , Используйте jspdf Для создания PDF-файла.

Затем вы можете превратить его в URI данных и вставить ссылку для загрузки в DOM

Тем не менее, вам нужно самостоятельно написать преобразование HTML в pdf.

Просто используйте печатные версии своей страницы и предоставьте пользователю возможность выбрать способ печати страницы.

Редактировать: По-видимому, он имеет минимальную поддержку

Таким образом, ответ - написать собственный PDF-писатель или попросить существующего PDF-писателя сделать это за вас (на сервере).

Answer 2

Да, это очень легко сделать с помощью 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>

Ссылка jsfiddle здесь

Answer 3

Вы можете использовать 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

Answer 4

Вот как бы я это сделал, это идея не пуленепробиваемый дизайн, вам нужно изменить его

• Пользователь нажимает кнопку «Сохранить как PDF»
• На сервер отправляется вызов с использованием ajax
• Сервер отвечает URL для PDF, созданного с использованием HTML, я очень успешно использовал Apache FOP
• Js, обрабатывающий ответ ajax, делает location.href для указания URL-адреса, отправленного JS, и как только этот URL-адрес загружается, он отправляет файл с использованием заголовка расположения содержимого в качестве вложения, заставляя пользователя загрузить файл.

Answer 5

Это может быть поздний ответ, но лучше всего: https://github.com/eKoopmans/html2pdf

Чистая реализация JavaScript. Позволяет указать только один элемент по идентификатору и преобразовать его.

Answer 6

Я использовал библиотеку 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");
      });
});

Демо: https://jsfiddle.net/viethien/md03wb21/27/

Answer 7

Короче говоря: нет. Первая проблема - это доступ к файловой системе, которая в большинстве браузеров по умолчанию отключена по соображениям безопасности. Современные браузеры иногда поддерживают минималистичное хранилище в форме базы данных, или вы можете попросить пользователя включить доступ к файлу.

Если у вас есть доступ к файловой системе, то сохранение в формате HTML не так сложно (см. Объект файла в документации JS), но PDF не так просто. PDF - довольно продвинутый формат файла, который действительно плохо подходит для Javascript. Это требует от вас записи информации в типах данных, которые не поддерживаются Javascript, например, слова и квадраты. Вам также необходимо предварительно определить систему поиска по словарю, которая должна быть сохранена в файл. Я уверен, что кто-то может заставить это работать, но затраченные усилия и время лучше потратить на изучение C ++ или Delphi.

Экспорт HTML, однако, должен быть возможен, если пользователь предоставляет вам неограниченный доступ

Answer 8

$('#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>santanu@macallied.com</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>

Answer 9

Да. Например, вы можете использовать решение по https://grabz.it.

У него есть Javascript API, который можно использовать различными способами для захвата и манипулирования снимком экрана. Чтобы использовать его в своем приложении, вам необходимо сначала получить ключ приложения и секретный и скачать бесплатный 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>

Затем просто подождите немного, и изображение автоматически появится внизу страницы, без необходимости перезагрузки страницы.

Это самый простой. Дополнительные примеры манипуляции изображениями, прикрепления скриншотов к элементам и т. Д. См. В документации .

.

Answer 10

Существует еще один очевидный и простой способ конвертировать HTML в PDf с использованием JavaScript: для этого используйте онлайн-API. Это будет хорошо работать, если вам не нужно выполнять преобразование, когда пользователь находится в автономном режиме.

FreeHtmlToPdf.com - это одна из опций, которая имеет приятный API. Я уверен, что вы можете найти альтернативы (например, PdfMage , который, очевидно, имеет собственный API, но не использует свой протокол).

Для API FreeHtmlToPdf у вас будет что-то вроде этого:

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();