☰

サンプル

tag-icon • tag-icon browser vector-graphics rendering print-to-pdf
サンプル

これは多くの人にとって非常に重要な質問です。

ウェブを検索したところ、HTML文書をPDF文書に変換できるコマンドラインツールがいくつか見つかりましたが、それらはすべて独自の、かなり不完全なレンダリングエンジンを使用しているようで、品質が低下します。

最新の Web ブラウザーのレンダリング出力を、ベクター グラフィックスを可能な限り保持しながら PDF (および/または SVG) に印刷するにはどうすればよいでしょうか。

次のような解決策があります:ウェブキット-pdf(すべてをビットマップ グラフィックにレンダリングします)

を探していますオプション、代替案、提案プリンタドライバや Web サービスもあるでしょうか?

更新: これまでに次のことがわかりました

リンク:

ありがとう

答え1

レンダリングされた出力は、定義上、ビットマップ イメージです。

そのビットマップ イメージが作成されたベクター オブジェクトには、レンダリングされたイメージからはアクセスできません。

元の HTML や CSS (など) に戻り、その元の素材を使用して、ビットマップを生成するために使用されたレイアウト アルゴリズムの新しい並列実装を使用して、新しいベクター ベースの表現を生成する必要があります。

Chrome の「PDF として印刷」機能は、フォントや最終画像のその他の部分のベクター特性を保持するようです。以下に示すように、PDF のビットマップ画像で発生する明らかなピクセル化なしに、無制限に拡大できます。

ここに画像の説明を入力してください

答え2

あなたは望むかもしれないPDFクリエイター（プリンタドライバ）は、オープンソースプロジェクト主催出典:。

HTMLページを印刷したところ、VML（マイクロソフト）ベクトルグラフIEブラウザから埋め込まれた、SVGAFirefox ブラウザから PDFCreator にグラフが送信され、PDFCreator はこれらのベクター データを保持します。

画面とプリンタデバイス間のレンダリング結果の違いを気にしない場合は（メディアの属性スタイルタグ）の場合は、PDFCreator が答えです。

サンプル

ブラウザからスクリーンデバイスにレンダリングされた元の出力（Firefox 15.0.1 で表示される SVG ロゴ）

Firefox で表示される SVG グラフ

PDFCreator プリンタに印刷 (プリンタ デバイスにレンダリング)

PDFを100%のズームレベルで表示

PDF 100% 拡大

PDF をズームレベル 150% で表示 (ロスレスズーム)

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>

関連情報