☰

示例

tag-icon • tag-icon browser vector-graphics rendering print-to-pdf
示例

对于很多人来说，这是一个至关重要的问题：

在网上搜索，我发现了几个命令行工具，允许你将 HTML 文档转换为 PDF 文档，但它们似乎都使用自己的、相当不完整的渲染引擎，导致质量较差

如何将现代网络浏览器的渲染输出打印为 pdf（和/或 svg）同时保留尽可能多的矢量图形？

有一个解决方案叫做：webkit-pdf（将所有内容渲染为位图图形）

我在寻找选项，备择方案，建议甚至可能是打印机驱动程序或者网络服务？

更新：到目前为止我发现以下内容

链接：

谢谢

答案1

根据定义，渲染的输出是位图图像。

构建位图图像的矢量对象无法从渲染图像中访问。

您必须返回到原始 HTML 和 CSS（等等），并使用原始材料，使用用于生成位图的布局算法的新并行实现来生成新的基于矢量的表示。

Chrome 的“打印为 PDF”功能似乎保留了字体的矢量特性和最终图像的其他部分——您可以无限放大，如下所示，而不会出现 PDF 中的位图图像明显的像素化。

在此处输入图片描述

答案2

你可能想要PDF创建器（打印机驱动程序），它是一个开源项目主办sourceforge.net。

我刚刚打印了一个 HTML 页面虚拟主机（微软）向量圖嵌入 IE 浏览器，SVG图形从 Firefox 浏览器复制到 PDFCreator，PDFCreator 保留这些矢量数据。

如果你不关心屏幕和打印机设备之间的渲染结果的差异（正如你在评论中提到的那样媒体的属性风格标签），那么 PDFCreator 就是答案。

示例

浏览器到屏幕设备的原始渲染输出（Firefox 15.0.1 中显示的 SVG 徽标）

Firefox 中显示的 SVG 图形

打印到 PDFCreator 打印机（呈现到打印机设备）

以 100% 缩放比例查看 PDF

PDF 缩放 100%

以 150% 的缩放比例查看 PDF（无损缩放）

PDF 缩放 150%

更多基于VML矢量图的样例

是的，它只是旋转的文本，但它是 VML 矢量图

VML 矢量图的 HTML 代码

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

相关内容