HTML в PDF с узлом.js

Я ищу, чтобы создать для печати pdf версия моего веб-сайта. Что-то вроде express.render() только визуализировать страницу как pdf

кто-нибудь знает модуль, который делает это ?

если нет, то как бы вы идти о реализации одного ? Я видел, как некоторые методы говорят об использовании безголового браузера, например phantom.js, но не уверен, что поток.

8 58
node.js iis-express pdf-generation

8 ответов:

распространяясь на ответ Мустафы.

A) установить http://phantomjs.org/ а потом

B) установите модуль фантомного узла https://github.com/amir20/phantomjs-node

enter image description here

C) Вот пример рендеринга pdf

var phantom = require('phantom');   

phantom.create().then(function(ph) {
    ph.createPage().then(function(page) {
        page.open("http://www.google.com").then(function(status) {
            page.render('google.pdf').then(function() {
                console.log('Page Rendered');
                ph.exit();
            });
        });
    });
});

вывод PDF:

enter image description here

EDIT:молчат печати в формате PDF

java -jar pdfbox-app-2.0.2.jar PrintPDF -silentPrint C:\print_mypdf.pdf

79

Фантом.js это безголовый сервер webkit, и он загрузит любую веб-страницу и отобразит ее в памяти, хотя вы, возможно, не сможете ее увидеть, есть функция захвата экрана, в которой вы можете экспортировать текущее представление как PNG, PDF, JPEG и GIF. Взгляните на это пример из phantom.документация Яш

21

Если вы хотите экспортировать HTML в PDF. У вас есть много вариантов. без узла даже

Вариант 1:есть кнопка на html-странице, которая вызывает окно.функция печати. используйте браузеры родной html в pdf. используйте медиа-запросы, чтобы Ваша html-страница хорошо выглядела в pdf. и у вас также есть печать до и после событий, которые можно использовать для внесения изменений на страницу перед печатью.

2. htmltocanvas или rasterizeHTML. для преобразования HTML для canvas, затем вызовите toDataURL () на объекте canvas, чтобы получить изображение . и использовать библиотеку JavaScript, такие как jsPDF чтобы добавить это изображение в PDF-файл. Недостатком этого подхода является то, что pdf не становится редактируемым. Если вы хотите, чтобы данные, извлеченные из PDF, есть разные способы для этого. 3. @Jozzhard ответ
11

лучшее решение, которое я нашел, это html-pdf. Это просто и работать с большим html.

https://www.npmjs.com/package/html-pdf

Это так просто:

    pdf.create(htm, options).toFile('./pdfname.pdf', function(err, res) {
        if (err) {
          console.log(err);
        }
    });
7

создать PDF из внешнего URL

вот адаптация предыдущих ответов, которая использует html-pdf, но также сочетает его с requestify так что он работает с внешним URL:

установить зависимости

npm i -S html-pdf requestify

затем создайте скрипт:

//MakePDF.js

var pdf = require('html-pdf');
var requestify = require('requestify');
var externalURL= 'http://www.google.com';

requestify.get(externalURL).then(function (response) {
   // Get the raw HTML response body
   var html = response.body; 
   var config = {format: 'A4'}; // or format: 'letter' - see https://github.com/marcbachmann/node-html-pdf#options

// Create the PDF
   pdf.create(html, config).toFile('pathtooutput/generated.pdf', function (err, res) {
      if (err) return console.log(err);
      console.log(res); // { filename: '/pathtooutput/generated.pdf' }
   });
});

тогда вы просто запустите из командной строки:

node MakePDF.js

смотрите, как ваш beautify pixel perfect PDF будет создан для вас (бесплатно!)

5

использовать html-pdf

var fs = require('fs');
var pdf = require('html-pdf');
var html = fs.readFileSync('./test/businesscard.html', 'utf8');
var options = { format: 'Letter' };

pdf.create(html, options).toFile('./businesscard.pdf', function(err, res) {
  if (err) return console.log(err);
  console.log(res); // { filename: '/app/businesscard.pdf' } 
});
2

пакета

Я html-pdf

простота в использовании и позволяет не только сохранять pdf в виде файла, но и передавать содержимое pdf в WriteStream (чтобы я мог передавать его непосредственно в хранилище Google, чтобы сохранить там мои отчеты).

использование css + изображений

он учитывает css. Единственная проблема, с которой я столкнулся - это игнорирование моих изображений. Решение, которое я нашел, было заменить url в src значение attrribute by в base64, например,

<img src="data:image/png;base64,iVBOR...kSuQmCC">

вы можете сделать это с помощью вашего кода или использовать один из онлайн конвертеров, например https://www.base64-image.de/

скомпилировать допустимый html код из фрагмента html + css

  1. я должен был получить фрагмент моего html документ (я только что приложил .метод html () на селекторе jQuery).
  2. тогда я прочитал содержание соответствующего .

используя это два значения (хранятся в переменных html и css соответственно) я скомпилировал допустимый html-код с помощью строку шаблона

var htmlContent = `
<!DOCTYPE html>
<html>
  <head>
    <style>
      ${css}
    </style>
  </head>
  <body id=direct-sellers-bill>
    ${html}
  </body>
</html>`

и передал его create метод html-pdf.

2

попробуйте использовать Puppeteer для создания PDF из HTML

пример отсюда https://github.com/chuongtrh/html_to_pdf

или https://github.com/GoogleChrome/puppeteer

0