Как распечатать визуализированный сайт в PDF или векторную графику?

Это важный вопрос для многих:

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

Как вы можете распечатать визуализированный вывод современного веб-браузера в pdf (и / или svg), сохранив при этом как можно больше векторной графики?

Существует решение под названием: webkit-pdf (которое все переводит в растровую графику)

Я ищу варианты, альтернативы, предложения, возможно, даже принтер-драйвер или веб-сервисы?

Обновление: пока я нашел следующее

Ссылки:

Спасибо

2 ответа

Визуализированный вывод по определению является растровым изображением.

Векторные объекты, из которых было создано это растровое изображение, недоступны из этого визуализированного изображения.

Вам придется вернуться к исходному HTML и CSS (и т. Д.) И использовать этот исходный материал для создания нового векторного представления, используя новую параллельную реализацию алгоритмов компоновки, которые использовались для создания растрового изображения.


Похоже, что функция Chrome "Print as PDF" сохраняет векторную природу шрифтов и некоторых других частей конечного изображения - вы можете увеличивать изображение до бесконечности, как показано ниже, без очевидной пикселизации, получаемой из растровых изображений в PDF.

введите описание здесь

Вы можете захотеть PDFCreator (драйвер принтера), это проект с открытым исходным кодом, размещенный на http://sourceforge.net/.

Я только что напечатал HTML-страницу с векторной графикой VML ( MSDN), встроенной из браузера IE, графику SVG из браузера Firefox в PDFCreator, и PDFCreator сохраняет эти векторные данные.

Если вас не волнует разница отображаемых результатов между экраном и принтером (как вы упомянули в комментарии об атрибуте media тега style), тогда PDFCreator - это ответ.


образцы

Вывод оригинала из браузера на экран устройства (логотип SVG отображается в Firefox 15.0.1)

SVG график отображается в Firefox

Печать на принтере PDFCreator (отображается на устройстве принтера)

Просмотр PDF в масштабе 100%

PDF увеличить на 100%

Просмотр PDF с уровнем увеличения 150% (без потерь)

PDF увеличить на 150%


Больше примеров на основе векторного графика VML

да, это просто повернутый текст, но это VML векторный график

HTML-код векторного графа VML

<html xmlns:v='urn:schemas-microsoft-com:vml'>
    <head>
        <style>v\: * { behavior:url(#default#VML); display:inline-block }</style>
    </head>

    <body>
        <v:line from="0,100" to="200,0" style="float:left">
            <v:path textpathok="True"/>
            <v:textpath on="True" string="SuperUser.com"/>
        </v:line>
        <h1>Q479701</h1>
        <p>
            PDFCreator retains vector graph
        </p>
    </body>
</html>
Другие вопросы по тегам