WEB技術の一手！自動でPDFが出力できる！

2022/03/02

HTMLをPDFに変換する
まとめ

PDF資料を作成する際に使用するソフトといえば、真っ先に思い浮かぶのはデザインに使う定番のソフトではないでしょうか。
書籍のレイアウトに強い「InDesign」、グラフィックデザインの王道ツール「Illustrator」などを使えば、簡単に作成したデザインをPDFに書き出すことが可能です。

しかし、同じデザインのテンプレートを使って、データだけを入れ替えて大量に資料を作成する場合には、いちいちデザインデータを開き、データを貼り付けて書き出すのは、すごく手間が掛かります。。。しかも、このような作業を人間の手で行うと、ミスが起きやすいです。

そこで、今回はWEB技術の力を借りて、自動的にPDFを書き出す方法をご紹介します。

HTMLをPDFに変換する

考え方としては、レイアウトをHTMLとCSSで作成し、そのデータを専門のライブラリを使ってPDFに変換します。
今回は「Laravel」というPHPプログラムのフレームワークで、「dompdf」というライブラリを使用します。

dompdfのインストール

dompdfのインストールは簡単！以下のワンコマンドでOKです！

composer require barryvdh/laravel-dompdf

1	composer require barryvdh/laravel-dompdf

インストールした「dompdf」サービスを呼び出せるようにするため、「app\config\app.php」ファイルの「providers」配列に以下を追加します。

'providers' => [
       /*
        * Laravel Framework Service Providers...
        */
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,
 
        /* 追加：dompdf */
        Barryvdh\DomPDF\ServiceProvider::class
],

'providers' => [

* Laravel Framework Service Providers...

App\Providers\EventServiceProvider::class,

App\Providers\RouteServiceProvider::class,

/* 追加：dompdf */

Barryvdh\DomPDF\ServiceProvider::class

そして、簡単に呼び出せるよう、「aliases」配列に以下のように別名で指定します。

 'aliases' => [
       …
       /* 追加：dompdf */
       'PDF' => Barryvdh\DomPDF\Facade::class,
],

'aliases' => [

…

/* 追加：dompdf */

'PDF' => Barryvdh\DomPDF\Facade::class,

以上が「dompdf」を使うための準備になります。

URLルートの指定

次に、PDFの書き出しを行うルート、処理を書くコントローラーなどを指定します。

/* Routes\web.php */
Route::get('/pdf', [PDFController::class, 'download'])->name('pdf.download');

1 2	/* Routes\web.php */ Route::get('/pdf', [PDFController::class, 'download'])->name('pdf.download');

テンプレートファイルの作成

続いて、PDFを書き出すためのベースとなるテンプレートを作成します。

<?php # 親テンプレート ?>
@extends('layouts.pdf')
 
<?php # ページタイトル ?>
@section('pagetitle', 'pdfの書き出し')
 
@section('maincontent')
<h2>dompdfでpdfを出力する</h2>
@endsection

<?php # 親テンプレート ?>

@extends('layouts.pdf')

<?php # ページタイトル ?>

@section('pagetitle', 'pdfの書き出し')

@section('maincontent')

<h2>dompdfでpdfを出力する</h2>

@endsection

Controllerで処理を実装する

最後に、PDFの書き出し処理をControllerで実装します。

//ライブラリを読み出す
use PDF;
 
class PDFController extends Controller
{
   /**
    * PDF出力
    */
   public function download(Request $request)
   {
       Log::info('PDF出力');
 
	//ブラウザタブでPDFを表示する場合
       $pdf = PDF::loadView('pdf');
       return $pdf->stream();
 
	//直接にダウンロードする場合
	return $pdf->download('hello.pdf');
   }
}

//ライブラリを読み出す

use PDF;

class PDFController extends Controller

{

/**

* PDF出力

public function download(Request $request)

{

Log::info('PDF出力');

//ブラウザタブでPDFを表示する場合

$pdf = PDF::loadView('pdf');

return $pdf->stream();

//直接にダウンロードする場合

return $pdf->download('hello.pdf');

}

日本語対応

「dompdf」自体は日本語に対応していません。
現状では、日本語の部分が「文字化け」してしまいます。
そのため、日本語の外部フォントを読み込む必要があります。

以下のサイトからIPA明朝・ゴシックをダウンロードします。
https://moji.or.jp/ipafont/ipa00303/

ダウンロードしたフォントファイルを「storage/fonts/」フォルダに入れます。

そして、@font-faceを使ってフォントを読み込みます。
headタグに以下のように指定します。

@font-face{
      font-family: ipag;
      font-style: normal;
      font-weight: normal;
      src: url('{{ storage_path("fonts/ipag.ttf")}}');
}
body {
      font-family: ipag;
}

@font-face{

font-family: ipag;

font-style: normal;

font-weight: normal;

src: url('{{ storage_path("fonts/ipag.ttf")}}');

}

body {

font-family: ipag;

}

なお、実際のクラス設定で、font-weightをnormal以外で指定すると、再び文字化けしてしまいますので、@font-faceで「font-weight: 600」のバージョンを指定する必要があります。

CSS対応

また、外部CSSを以下のようにヘッダータグで設定すると、CSSが全く効きません。

<link rel="stylesheet" href="{{ route('css/pdf.css') }}">

1	<link rel="stylesheet" href="{{ route('css/pdf.css') }}">

routeの指定方法では、dompdfはうまく認識しないので、dompdfライブラリにCSSを識別させるため、routeではなく「public_path」を使う必要があります。

出力PDFのサイズや向き

デフォルトでは、PDFが縦向きで出力されます。横向きで出力したい場合は、以下のようにコントローラーに追記します。

Log::info('PDF出力');
$building = [];
 
$pdf = PDF::loadView('proposal.detail-pdf',compact('building'));
// A4サイズで、縦向きで出力する
$pdf = $pdf->setPaper('A4', 'landscape');