web-dev-qa-db-ja.com

ブラウザの(chrome / firefox)HTML / CSS / JSレンダリングエンジンを使用してPDFを生成する方法

Html/css/jsファイルからPDFを生成する素敵なプロジェクトがあります

  1. http://wkhtmltopdf.org/ (オープンソース)
  2. https://code.google.com/p/flying-saucer/ (オープンソース)
  3. http://cssbox.sourceforge.net/ (必ずしも単純なpdf生成ではない)
  4. http://phantomjs.org/ (オープンソースではPDF出力が可能です)
  5. http://www.princexml.com/ (商用ですが、最高のものを提供します)
  6. https://thepdfapi.com/ a chromeからHTMLからPDFを吐くための変更

プログラムでchromeまたはFirefoxブラウザ(両方ともクロスプラットフォームであるため))を制御して、Webページをロードし、スクリプトを実行してページのスタイルを設定し、印刷用のpdfファイルを生成します。

しかし、どのようにしてブラウザを自動で制御して、次のようなことができるようにしますか

render-to-pdf file-to-render.html out.pdf

ページを参照してPDFに印刷することで、このジョブを手動で簡単に作成できます。また、PDFファイルで、100%仕様に準拠した正確なレンダリングされたhtml/css/jsページを取得します。ブラウザーの設定オプションを使用して、PDFでURLヘッダーを省略することもできます。しかし、繰り返しになりますが、このプロセスを自動化しようとする方法を教えてください。

サーバー側で自動化し、ブラウザーを開き、ページに移動し、ブラウザーでレンダリングされたページを使用してPDFを生成したいと思います。

私は多くの研究をしてきましたが、正しい質問をする方法がわかりません。私はブラウザをプログラムで制御したいのですが、おそらくSeleniumと同じですが、WebページをPDFとしてエクスポートするところまでです(したがって、ブラウザのレンダリング機能を使用して適切なPDFを生成します)。

22
David Hofmann

FirefoxにはそのためのAPIメソッドがあります: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/saveAsPDF

browser.tabs.saveAsPDF({})
  .then((status) => {
    console.log('PDF file status: ' + status);
  });

ただし、 Browser Extensions でのみ使用できるようで、Webページから呼び出すことはできません。

私はまだそのためのパブリックAPIを探しています...

私は専門家ではありませんが、PhamtomJSはその仕事に適したツールのようです。私はそれがどのヘッドレスブラウザの下で使用するかについてはわかりません(私はそれがクロム/クロムだと思います)

var page = require('webpage').create();
page.open('http://github.com/', function() {
     var s = page.evaluate(function() {
         var body = document.body,
             html = document.documentElement;

        var height = Math.max( body.scrollHeight, body.offsetHeight, 
            html.clientHeight, html.scrollHeight, html.offsetHeight );
        var width = Math.max( body.scrollWidth, body.offsetWidth, 
            html.clientWidth, html.scrollWidth, html.offsetWidth );
        return {width: width, height: height}
    });

    console.log(JSON.stringify(s));

    // so it fit ins a single page
    page.paperSize = {
        width: "1980px",
        height: s.height + "px",
        margin: {
            top: '50px',
            left: '20px'
        }
    };

    page.render('github.pdf');
    phantom.exit();
});

それが役に立てば幸い。

6
crodas