wkhtmltopdfとlaravel-snappyをインストール
- wkhtmltopdfのサイトから自分の環境にあったものをインストール
インストール後、下記に存在していればOK
% ls /usr/local/bin/wkhtmltopdf
/usr/local/bin/wkhtmltopdf
- laravel-snappyをインストール
composer require barryvdh/laravel-snappy
snappyの設定ファイルを自動生成する
- 下記コマンドで
/config/snappy.php
設定ファイルを生成
php artisan vendor:publish --provider="Barryvdh\Snappy\ServiceProvider"
- もしcomposerなどでwkhtmltopdfをインストールした場合は下記のようにbinaryの指定パスをカスタマイズしてあげる
'binary' => base_path('vendor/h4cc/wkhtmltopdf-amd64/bin/wkhtmltopdf-amd64'),
PDF出力用のルーティング & メソッド追加
- routes/web.php
Route::get('/output/pdf', [OutputController::class, 'pdf']);
- OutputController.php
<?php
namespace App\Http\Controllers;
use use PDF;
class TraineeController extends Controller
{
public function outputPdf()
{
/**
* 出力したいviewを読み込む
* この場合、views/output/pdf.blade.phpを出力する
* パラメータを渡したい場合、普段のview()関数と同様に第二引数に指定してあげればOK
* 今回日本語を使用するのでencodingに'utf-8'を指定
* PDF::loadView('output.pdf', ['message' => 'Hello']);
*/
return PDF::loadView('output.pdf')
->setOption('encoding', 'utf-8')
->inline(); // ダウンロードしたい場合はdownload()に変更
}
- PDFにてCSSのスタイルが効いていない場合
フルパスを指定してあげる必要がある
<link href="{{ public_path('css/app.css') }}" rel="stylesheet">
The exit status code '1' says something went wrong: stderr: "Loading pages...エラーが出た場合
- ローカルのファイルにアクセスできないエラーが出た
The exit status code '1' says something went wrong: stderr: "Loading pages (1/6) [> ] 0% [======> ] 10% Warning: Blocked access to file Warning: Blocked access to file [==========> ] 17% Error: Failed to load about:blank, with network status code 301 and http status code 0 - Protocol "about" is unknown Error: Failed to load about:blank, with network status code 301 and http status code 0 - Protocol "about" is unknown
/config/snappy.php
で下記オプションを指定することで解消
'pdf' => [
'enabled' => true,
'binary' => env('WKHTML_PDF_BINARY', '/usr/local/bin/wkhtmltopdf'),
'timeout' => false,
// ⭐️ ここ
'options' => ['enable-local-file-access' => true],
'env' => [],
],
display: flexのスタイル指定が効かないとき
- wkhtmltopdf向けの指定も追加してあげる
.flex {
display: flex;
display: -webkit-box; /* ⭐️追加 */
justify-content: center;
-webkit-box-pack: center; /* ⭐️追加 */
}