☰

樣品

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建立器（印表機驅動程式），這是一個開源專案主辦於來源網。

我剛剛列印了一個 HTML 頁面虛擬機器語言（微軟軟體定義網絡）向量圖從 IE 瀏覽器嵌入，靜止無功發生器圖形從 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>

相關內容