Конвертировать html + css в pdf с php? [закрытый]

How to use

This module will convert some basic and valid HTML code to its equivalent in pdfmake.


Node

npm install html-to-pdfmake
var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

Example:

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  <div>
    <h1>My title</h1>
    <p>
      This is a sentence with a <strong>bold word</strong>, <em>one in italic</em>,
      and <u>one with underline</u>. And finally <a href="https://www.somewhere.com">a link</a>.
    </p>
  </div>
`);

/*
it will return:
{
  stack:
    },
    {
      text: 
        },
        {
          text: ', '
        },
        {
          text: 'one in italic',
          italics: true,
          style: 
        },
        {
          text: ', and '
        },
        {
          text: 'one with underline',
          decoration: 'underline',
          style: 
        },
        {
          text: '. And finally '
        },
        {
          text: 'a link',
          color: 'blue',
          decoration: 'underline',
          link: 'https://www.somewhere.com',
          style: 
        },
        {
          text: '.'
        }
      ],
      margin: ,
      style: 
    }
  ],
  style: 
}
 */

Browser

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/docs/browser.js"></script>

Example:

<!doctype html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my example</title>
  <!-- pdfmake files: -->
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'></script>
  <!-- html-to-pdfmake file: -->
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/docs/browser.js"></script>
</head>
<body>
  
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  </script>
</body>
</html>

Reference

Options

Options are passed into the constructor.

Type: Required: true

Path to the input HTML

Type: or

Path to the input html as a , or . If specified this will override inputPath.

Type:

Path to the output pdf file.

options.include

Type:

An array of strings or objects containing a type of and a filePath pointing to the asset.

Example:

  "/path/to/asset.css"
  // ...

or

  {
    "type": "css",
    "filePath": "/path/to/asset.css"
  }
  // ...

Type: Default value:

Delay in milli-seconds before rendering the PDF (give HTML and CSS a chance to load)

options.template

Type: Default value:

The template to use when rendering the html. You can choose between (HTML5 Boilerplate) or (Boostrap 3.1.1)

options.templatePath

Type: Default value: the

The template to use for rendering the html. If this is set, it will use this instead of the template path.

options.templateUrl

Type:

The url to use for rendering the html. If this is set, this will be used for serving up the html. This will override and


Type:

This object will be passed directly to puppeteer. The full list of options can be found .

options.launchOptions

Type:

This object will be passed directly to puppeteer. The full list of options can be found .

Legacy Options

See above for pdf options. Since some of these options are converted over to work with puppeteer, this is automatically done if is left empty.

Type: Default value:

‘A3’, ‘A4’, ‘Legal’, ‘Letter’ or ‘Tabloid’

Type: Default value:

true for landscape, false for portrait.

Type: Default value:

  • 0 — default
  • 1 — none
  • 2 — minimum

Как сохранить веб-страницу

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

А если, предположим, вам нужно лететь в другой город самолетом или ехать поездом, то тогда могут возникнуть перебои со связью, и вы не сможете открыть страницу сайта с полезной для вас информацией.

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

Для сохранения веб-страниц можно использовать несколько способов. Мы рассмотрим основные из них.

Cохранение веб-страницы в word

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

Выделяем статью или ее фрагмент, копируем, нажимая для этого сочетание клавиш Ctrl + C, открываем Word и при помощи клавиш Ctrl + V вставляем в документ Word.

Затем не забываем сохранить (Ctrl + S) в нужное место: на внешний диск, флэшку, или в мобильное устройство.

Как сохранить веб-страницу в html


Перед вами откроется окно Проводника, в котором вы указываете в какой папке будет сохранятся веб-страница. В примере мы просто на рабочем столе создаем папку «сохраненные сайты»

Далее указываем имя файла страницы. По умолчанию подставляется заголовок страницы, но вы можете задать свое имя файла.

Тип файла. Здесь вы выбираете тот тип, который вам нужен. Рассмотрим их различия. При выборе типа «Веб-страница полностью» будет сохранена не только веб-страница, но и все изображения, скрипты, стили. Все они будут хранится в отдельной одноименной папке.

Если же вы будете выбирать тип «веб-страница, только HTML», то при открытии такого файла все данные (изображения, стили), будут подгружаться с интернета. При отсутствии интернета у вас на экране будет просто не отформатированный текст. Поэтому сохранять в этом типе файл нужно тогда, когда вы знаете, что у вас будет подключение к всемирной сети.

Как сохранить веб-страницу в pdf

Файл в формате PDF избавляет вас думать будет ли интернет или нет. Веб-страница, сохраненная в этом формате доступна в любом месте. Открыть такой файл можно почти любым браузером как на компьютере, так и на планшете, смартфоне.

Для того, чтобы сохранить веб-страницу в формате PDF, снова воспользуемся правой кнопкой мыши на странице сайта и из контекстного меню выбираем пункт «Печать»

Или же применив сочетание клавиш Ctrl + P

Откроется окно настроек печати

Справа видно, как будет печататься страница в формате А4, слева настройки печати. Нам же не нужно печатать страницу, поэтому нажимаем на кнопочку «Изменить».

CLI interface

To use html5-to-pdf as a standalone program from the terminal run

npm install --global html5-to-pdf

Usage

Usage: html5-to-pdf  <path/to/html-file-path>

Options:

  -V, --version                               output the version number
  -i --include <path>..<path>                 path to either a javascript asset, or a css asset
  --page-size                           'A3', 'A4', 'Legal', 'Letter' or 'Tabloid'
  --landscape                                 If set it will change orientation to landscape from portriat
  --print-background                          Whether to print CSS backgrounds
  -t --template                     The template to used. Defaults to html5bp.
  --template-path [/path/to/template/folder]  Specifies the template folder path for static assets, this will override template.
  --template-url [http://localhost:8080]      Specifies the template url to use. Cannot be used with --template-path.
  -d --render-delay            Delay before rendering the PDF (give HTML and CSS a chance to load)
  -o --output <path>                          Path of where to save the PDF
  -h, --help                                  output usage information

2.3. PDF в браузере Mozilla Firefox

Оптимальные настройки PDF-принтера предусматривает и печать на борту Mozilla Firefox.

  • Кликаем кнопку «Открыть меню» (1 на рис. 11),
  • затем – «Печать» (2 на рис. 11):

Рис. 11. «Открыть меню» – «Печать» в Мозилле

В окне «Печать» можно задать параметры для сохранения веб-страницы в PDF (рис. 12):

  • количество необходимых страниц,
  • масштаб,
  • книжная или альбомная ориентация
  • и очень полезная опция «Упростить страницу», которая убирает лишние элементы навигации с веб-страницы. В итоге pdf-документ выглядит аккуратным, «причесанным».

Рис. 12. Сохранение странички в PDF-формате с помощью Мозиллы

Если в Мозилле, опция «Печать» есть название принтера (на рис. 13 – это HP LaserJet M1005), но отсутствует PDF, тогда надо

  • кликнуть по маленькому треугольничку (1 на рис. 13),
  • в выпадающем списке выбрать PDF (2 на рис. 13).


Рис. 13. Поиск PDF-формата в Мозилле

Добавляем CSS

В CSS есть специальный медиазапрос , который применяется для печати, зададим в нем нулевые отступы так, чтобы Header и Footer просто не помещались:

Этот способ сработает только для одностраничных документов, при печати двух и более страниц на последней внизу останется Footer с URL и нумерацией страниц. Можно явно попросить Chrome отключить отображение Header и Footer, задав параметр печати , но на данный момент он не вынесен в интерфейс командной строки. Чтобы добраться до него, понадобятся инструменты для автоматизации работы с браузером: Selenium или puppeteer. Дальше я рассмотрю первый вариант, потому как в моем проекте использовался Python.

Use with Node

To use it in a Node script you need to install :

npm install jsdom

Then in your JS file:

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var fs = require('fs');
var jsdom = require("jsdom");
var { JSDOM } = jsdom;
var { window } = new JSDOM("");
var htmlToPdfMake = require("html-to-pdfmake");

var html = htmlToPdfMake(`<div>the html code</div>`, {window:window});

var docDefinition = {
  content: 
    html
  
};

var pdfDocGenerator = pdfMake.createPdf(docDefinition);
pdfDocGenerator.getBuffer(function(buffer) {
  fs.writeFileSync('example.pdf', buffer);
});

Что еще не так?

Я вижу две основные проблемы:

Невозможность простого определения положения элементов в документе. Это делает затруднительным формирование оглавления с автоматическим указанием номеров страниц, особенно, если размер контента заранее неизвестен. Преобразованием занимается Chrome — продукт Google который собирает о пользователях самую разную информацию

Если утечка данных из документа недопустима, к предлагаемому решению нужно относится осторожно — закрыть браузеру выход на внешние ресурсы, или вовсе поискать другое решение. Использование Chromium с открытыми исходниками не решает проблемы — в нем уже находили жучки от Google.

Quick Start

Just pass your HTML in to dompdf and stream the output:

// reference the Dompdf namespace
use Dompdf\Dompdf;

// instantiate and use the dompdf class
$dompdf = new Dompdf();
$dompdf->loadHtml('hello world');

// (Optional) Setup the paper size and orientation
$dompdf->setPaper('A4', 'landscape');

// Render the HTML as PDF
$dompdf->render();

// Output the generated PDF to Browser
$dompdf->stream();

Setting Options

Set options during dompdf instantiation:

use Dompdf\Dompdf;
use Dompdf\Options;

$options = new Options();
$options->set('defaultFont', 'Courier');
$dompdf = new Dompdf($options);

or at run time

use Dompdf\Dompdf;

$dompdf = new Dompdf();
$dompdf->set_option('defaultFont', 'Courier');

See Dompdf\Options for a list of available options.

Note for running in docker

See Example Dockerfile. Make sure to container with .

docker build -t local/html5-to-pdf-example -f examples/Dockerfile .
docker run --rm -i --cap-add=SYS_ADMIN local/html5-to-pdf-example

Refer to puppeteer .

Note for running headlessly on Linux

(like on a server without X):

html5-to-pdf uses Puppeteer, which Google Chrome Headlessly, which in turn relies on an X server to render the pdf. If for whatever reason it can’t find a running X server, it will silently fail.

Troubleshooting

It’s ok if Xvfb can’t find fonts or shows other warnings. If Xvfb can’t start, it probably thinks there’s another X server running. Check that. If there is no other X server running but Xvfb insists there is, run this:

# (might need sudo)
  rm /tmp/.X11-unix/X1
  rm /tmp/.X1

Easy Installation

Install with composer

composer require dompdf/dompdf

Make sure that the autoload file from Composer is loaded.

// somewhere early in your project's loading, require the Composer autoloader
// see: http://getcomposer.org/doc/00-intro.md
require 'vendor/autoload.php';

Download and install

Download a packaged archive of dompdf and extract it into the directory where dompdf will reside

  • You can download stable copies of dompdf from https://github.com/dompdf/dompdf/releases

Use the packaged release autoloader to load dompdf, libraries, and helper functions in your PHP:

// include autoloader
require_once 'dompdf/autoload.inc.php';

Note: packaged releases are named according using semantic versioning (dompdf_MAJOR-MINOR-PATCH.zip). So the 1.0.0 release would be dompdf_1-0-0.zip. This is the only download that includes the autoloader for Dompdf and all its dependencies.

Install with git

From the command line, switch to the directory where dompdf will reside and run the following commands:

git clone https://github.com/dompdf/dompdf.git
cd dompdf/lib

git clone https://github.com/PhenX/php-font-lib.git php-font-lib
cd php-font-lib
git checkout 0.5.1
cd ..

git clone https://github.com/PhenX/php-svg-lib.git php-svg-lib
cd php-svg-lib
git checkout v0.3.2
cd ..

git clone https://github.com/sabberworm/PHP-CSS-Parser.git php-css-parser
cd php-css-parser
git checkout 8.1.0

Require dompdf and it’s dependencies in your PHP. For details see the autoloader in the utils project.

Output Example usage

const HTML5ToPDF = require("../lib")
const path = require("path")

const run = async () => {
  const html5ToPDF = new HTML5ToPDF({
    inputPath: path.join(__dirname, "assets", "basic.html"),
    outputPath: path.join(__dirname, "..", "tmp", "output.pdf"),
    templatePath: path.join(__dirname, "templates", "basic"),
    include: 
      path.join(__dirname, "assets", "basic.css"),
      path.join(__dirname, "assets", "custom-margin.css"),
    ,
  })

  await html5ToPDF.start()
  await html5ToPDF.build()
  await html5ToPDF.close()
}

(async () => {
  try {
    await run()
    console.log("DONE")
  } catch (error) {
    console.error(error)
    process.exitCode = 1
  } finally {
    process.exit();
  }
})()

Запускаем Chrome через Selenium

Итак, устанавливаем Selenium командой , скачиваем с http://chromedriver.chromium.org/ хромдрайвер, соответствующий Вашей версии Chrome и используем функцию из примера ниже:

Для получения PDF файла можно запустить этот пример из командной строки указав url и имя файла для сохранения PDF, либо вызвать функцию и передать ей три аргумента:

  1. path — url html документа;
  2. chromedriver — путь на локальной машине к хромдрайверу (по умолчанию должен лежать в локальной директории);
  3. print_options — дополнительные атрибуты печати.

Следует отметить, что Selenium не имеет стандартного интерфейса для печати страницы в PDF, к тому же это умеет делать только Chrome, поэтому приходится напрямую вызывать .

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


С этим читают