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

Можно ли сохранить 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>

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

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

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

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

Я использовал 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/

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

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

Конвертировать html в pdf на стороне сервера намного проще и надежнее. Мы используем Google Puppeteer. Он хорошо поддерживается оболочками для любого языка на стороне сервера по вашему выбору. Puppeteer использует Chrome без головы для создания скриншотов и / или файлов PDF. Это избавит вас от головной боли, особенно если вам нужно создать сложные файлы PDF с таблицами, изображениями, графиками, несколькими страницами и т. Д.

https://developers.google.com/web/tools/puppeteer/

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

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

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

 $.ajax({
    url: "https://pdfmage.org/pdf-api/v1/process",
    type: "POST",
    crossDomain: true,
    data: { Html:"<html><body>Hi there!</body></html>" },
    dataType: "json",
    headers: {
        "X-Api-Key": "your-key-here" // not very secure, but a valid option for non-public domains/intranet
    },
    success: function (response) {
        window.location = response.Data.DownloadUrl;
    },
    error: function (xhr, status) {
        alert("error");
    }
});

Да. Например, вы можете использовать решение 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>

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

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

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

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

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