How to print a rendered website to pdf or vector graphics? [closed]

Rendered output is, by definition, a bitmap image.

The vector objects from which that bitmap image was constructed are not accessible from that rendered image.

You would have to return to the original HTML and CSS (etc) and use that original material to produce a new vector-based representation using a new parallel implementation of the layout algorithms that were used to produce the bitmap.


Chrome's "Print as PDF" function seems to preserve the vector nature of fonts and some other parts of the final image - you can zoom in indefinitely, as shown below, without the obvious pixellation you get from bitmap images in PDFs.

enter image description here


You may want PDFCreator (printer-driver), it's an open source project hosted at sourceforge.net.

I just printed a HTML page with VML (MSDN) vector graph embedded from IE browser, a SVG graph from Firefox browser, to PDFCreator, and PDFCreator retains these vector data.

If you don't care about the difference of rendered results between screen and printer device (as you mentioned in comment about the media attribute of style tag), then PDFCreator is an answer.


Samples

Original rendered output of browser to screen device (SVG logo displayed in Firefox 15.0.1)

SVG graph displayed in Firefox

Print to PDFCreator printer (rendered to printer device)

View PDF in zoom level 100%

PDF zoom 100%

View PDF in zoom level 150% (lossless zoom)

PDF zoom 150%


More samples based on VML vector graph

yes, it's just rotated text, but it IS VML vector graph

HTML code of the VML vector graph

<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>