PDF出力ライブラリが縦書きCSSに対応していない、そんなときにはヘッドレスクロームがある！

こんにちは、ジェイオンラインのフロントエンドエンジニア、鄭です。
ウェブサービスを開発していると、請求書・見積書など様々な帳票をPDF出力する機能を実装することがあります。
今回は”縦書きのテキストを美しくPDF出力する”という要件に関して、色々苦労したのでまとめておこうと思います。
レアなケースとは思いますが、きっと参考になると思います。

Laravelで使用できる便利なPDF生成ライブラリ”Snappy PDF””DomPdf”

通常ジェイオンラインではLaravelフレームワークを使用し、PDFの生成には「Snappy PDF」と「DomPdf」のライブラリを活用してきました。
インストールや日本語対応に少し時間はかかりますが、シンプルなコードでPDFを出力できます。例えば、Snappy PDFでは以下のようにコードを記述するだけでOKです。

PDF::loadView('pdf.view', compact('data'))->setPaper('b4', 'landscape') {
    ->setOption('encoding', 'utf-8')
    ->setOption('margin-top', 9)
    ->setOption('margin-bottom', 9)
    ->setOption('footer-center', '- [page] -')
    ->setOption('footer-font-size', 10)
    ->setOption('footer-spacing', 3)
    ->download('file.pdf');
}

しかし、最近のプロジェクトで問題に直面しました。

問題が発生したプロジェクトは、学習教材のプリントを、エクセルデータ→PDFデータ→プリントアウトという流れで生成するシステムでした。
教材は国語教科に関するものだったため、縦書きテキストを出力する必要が生じたのですが、探せども探せどもCSSの「vertical-rl」プロパティが正常に機能するライブラリは見当たりませんでした。

そこで最初の解決策として考えたのはHTMLを画像に変換し、それをPDFにする方法です。
これにより縦書きのPDFは生成できましたが、実際にプリンターでプリントアウトすると文字の周辺がぼやけたようになってしまいこの案は不採用となりました。

GoogleChormeヘッドレスモードによるPDF生成

途方にくれていたところ、社内のディレクターさんから「ヘッドレスクローム」の使用を提案されました。
ヘッドレスクロームはGUIを持たないブラウザですが、Linuxサーバにもインストール可能で、コマンドラインやネットワーク経由で動作させることができます。
ローカルPCからGoogleChromeブラウザの印刷機能でPDF化するとCSSの「vertical-rl」プロパティが正常に機能することを確認していたので、「ヘッドレスクローム」で印刷機能を使うことができれば、この問題が解決するのではないかと考えました。

このアプローチでは、以下の手順でヘッドレスクロームを使い、縦書きテキストのPDFを出力しました：

サーバーにヘッドレスクロームをインストール（yum install google-chrome-stable）
コマンドを使って、特定のURLを開き、PDFに保存

ヘッドレスクローム使用のサンプルコードも掲載しておきます。

$process = new Process([
    'google-chrome',
    '--no-sandbox',
    '--disable-gpu',
    '--headless',
    '--print-to-pdf-no-header',
    '--window-size=1265,896',
    '--run-all-compositor-stages-before-draw',
    '--virtual-time-budget=10000',
    '--print-to-pdf= '/var/jol/保存パス',
    'PDF保存するURL',
]);
$process->run();
if (!$process->isSuccessful()) {
    throw new ProcessFailedException($process);
}

この方法を採用することで、ブラウザに表示されている通りの美しいPDFを生成しプリントアウトできるようになりました。

これまでヘッドレスクロームを使用したことはありませんでしたが、日々進化しているようなので今後もチェックしていきたいと思います。
GoogleChromeに感謝です！

スタッフ積極採用中

ジェイオンラインではスタッフを随時募集しております。
採用情報ページよりお気軽にお問い合わせください。