HTML в PDF за допомогою Node.js

Я хочу створити pdfверсію веб-сторінок веб-сайту для друку . Щось на зразок express.render()лише відобразити сторінку якpdf

Хтось знає модуль вузла, який це робить?

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

Продовжуючи відповідь Мустафи.

A) Встановіть http://phantomjs.org/, а потім

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

В) Ось приклад надання 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:

РЕДАГУВАТИ: безшумний друк цього PDF

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

Phantom.js - це безголовий сервер webkit, і він буде завантажувати будь-яку веб-сторінку та відображати її в пам'яті, хоча, можливо, ви не зможете її побачити, є функція Screen Capture, за допомогою якої ви можете експортувати поточний вигляд у форматі PNG, PDF , JPEG та GIF. Погляньте на цей приклад із документації phantom.js

Якщо ви хочете експортувати HTML у PDF. У вас є багато варіантів. без вузла навіть

Варіант 1: На вашій сторінці html є кнопка, яка викликає функцію window.print (). скористатися власним браузером html у форматі pdf. використовуйте медіа-запити, щоб ваша HTML-сторінка добре виглядала у форматі PDF. а також у вас є друк до і після подій, які ви можете використовувати для внесення змін на свою сторінку до друку.

Варіант 2. htmltocanvas або rasterizeHTML . перетворіть свій html на полотно, а потім зателефонуйте toDataURL () на об'єкті полотна, щоб отримати зображення. і скористайтеся бібліотекою JavaScript, як jsPDF, щоб додати це зображення у файл PDF. Недоліком цього підходу є те, що pdf не стає доступним для редагування. Якщо вам потрібні дані, витягнуті з PDF, для цього існують різні способи.

Варіант 3. Відповідь @Jozzhard

Найкраще рішення, яке я знайшов, - це 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);
        }
    });

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

Приклад звідси https://github.com/chuongtrh/html_to_pdf

Або https://github.com/GoogleChrome/puppeteer

Створіть 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

Дивіться, як ваш красивий піксельний ідеальний PDF створюється для вас (безкоштовно!)

Пакет

Я використовував html-pdf

Простий у використанні і дозволяє не лише зберігати PDF у вигляді файлу, але й передавати вміст PDF до WriteStream (щоб я міг передати його прямо в Google Storage, щоб там зберігати свої звіти).

Використання css + зображень

Це враховує css. Єдина проблема, з якою я зіткнувся - це ігнорування моїх зображень. Рішенням, яке я знайшов, було замінити url у srcзначенні атрибута base64, наприклад

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

Ви можете зробити це за допомогою коду або скористатися одним із онлайн-конвертерів, наприклад https://www.base64-image.de/

Скомпілюйте дійсний HTML-код з HTML-фрагмента + CSS

1. Мені довелося отримати фрагмент мого htmlдокумента (я щойно застосував метод .html () у селекторі jQuery).
2. Потім я прочитав вміст відповідного cssфайлу.

Використовуючи ці два значення (що зберігаються у змінних htmlі cssвідповідно), я склав дійсний html-код за допомогою рядка Template

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

і передав його в createметод html-pdf .

Для тих, хто не хоче встановлювати PhantomJS разом із екземпляром Chrome / Firefox на своєму сервері - або тому, що проект PhantomJS в даний час призупинено , ось альтернатива.

Ви можете екстерналізувати перетворення на API, щоб виконати цю роботу. Багато існує та варіюється, але те, що ви отримаєте, - це надійна послуга з сучасними функціями (я думаю, що сумісні CSS3, веб-шрифти, SVG, Canvas).

Наприклад, за допомогою PDFShift (застереження, я засновник), ви можете зробити це, просто використовуючи requestпакет:

const request = require('request')
request.post(
    'https://api.pdfshift.io/v2/convert/',
    {
        'auth': {'user': 'your_api_key'},
        'json': {'source': 'https://www.google.com'},
        'encoding': null
    },
    (error, response, body) => {
        if (response === undefined) {
            return reject({'message': 'Invalid response from the server.', 'code': 0, 'response': response})
        }
        if (response.statusCode == 200) {
            // Do what you want with `body`, that contains the binary PDF
            // Like returning it to the client - or saving it as a file locally or on AWS S3
            return True
        }

        // Handle any errors that might have occured
    }
);

На мій погляд, найкращий спосіб зробити це за допомогою API, щоб ви не додавали велику та складну залежність у свій додаток, який запускає некерований код, який потрібно часто оновлювати.

Ось простий спосіб зробити це, який є безкоштовним для 800 запитів на місяць:

var CloudmersiveConvertApiClient = require('cloudmersive-convert-api-client');
var defaultClient = CloudmersiveConvertApiClient.ApiClient.instance;

// Configure API key authorization: Apikey
var Apikey = defaultClient.authentications['Apikey'];
Apikey.apiKey = 'YOUR API KEY';



var apiInstance = new CloudmersiveConvertApiClient.ConvertWebApi();

var input = new CloudmersiveConvertApiClient.HtmlToPdfRequest(); // HtmlToPdfRequest | HTML to PDF request parameters
input.Html = "<b>Hello, world!</b>";


var callback = function(error, data, response) {
  if (error) {
    console.error(error);
  } else {
    console.log('API called successfully. Returned data: ' + data);
  }
};
apiInstance.convertWebHtmlToPdf(input, callback);

За допомогою вищезазначеного підходу ви також можете встановити API локально або у власній інфраструктурі, якщо хочете.

Використовуйте 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' } 
});

Якщо ви приїдете сюди і шукаєте спосіб зробити PDF із шаблонів подання в Express, ми з колегою зробили express-template-to-pdf

що дозволяє генерувати PDF з будь-яких шаблонів, які ви використовуєте в Express - Pug, Nunjucks, будь-що.

Це залежить від html-pdf і написано для використання у ваших маршрутах так само, як ви використовуєте res.render:

const pdfRenderer = require('@ministryofjustice/express-template-to-pdf')

app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'pug')

app.use(pdfRenderer())

Якщо ви використовували res.render, то його використання повинно виглядати очевидно:

app.use('/pdf', (req, res) => {
    res.renderPDF('helloWorld', { message: 'Hello World!' });
})

Ви можете передати параметри в html-pdf для контролю розміру сторінки PDF-документа тощо

Просто спираючись на чудову роботу інших.

На додаток до @Jozzhart Answer, ви можете створити локальний html; подавати його експрес; і використовувати фантом для створення PDF з нього; щось на зразок цього:

const exp = require('express');
const app = exp();
const pth = require("path");
const phantom = require('phantom');
const ip = require("ip");

const PORT = 3000;
const PDF_SOURCE = "index"; //index.html
const PDF_OUTPUT = "out"; //out.pdf

const source = pth.join(__dirname, "", `${PDF_SOURCE}.html`);
const output = pth.join(__dirname, "", `${PDF_OUTPUT}.pdf`);

app.use("/" + PDF_SOURCE, exp.static(source));
app.use("/" + PDF_OUTPUT, exp.static(output));

app.listen(PORT);

let makePDF = async (fn) => {
    let local = `http://${ip.address()}:${PORT}/${PDF_SOURCE}`;
    phantom.create().then((ph) => {
        ph.createPage().then((page) => {
            page.open(local).then(() =>
                page.render(output).then(() => { ph.exit(); fn() })
            );
        });
    });
}

makePDF(() => {
    console.log("PDF Created From Local File");
    console.log("PDF is downloadable from link:");
    console.log(`http://${ip.address()}:${PORT}/${PDF_OUTPUT}`);
});

та index.html може бути будь-яким:

<h1>PDF HEAD</h1>
<a href="#">LINK</a>

результат:

Ви також можете використати пакет для створення вузлів pdf

URL-адреса пакету - https://www.npmjs.com/package/pdf-creator-node