Laravel PR

【Laravel】出力したエクセルのセルを装飾(スタイル)する方法

記事内に商品プロモーションを含む場合があります

以前「Laravel6でmaatwebsite/excelインストールとエクセル出力方法」でエクセルファイルを出力しました。今回は出力したエクセルファイルのセルをstyle(スタイル)やサイズ(width、height)を使って装飾する方法をご紹介します。
(Laravelバージョンは6系)

Laravelで出力したエクセルのセルを装飾するスタイル)前提条件

「Laravel6でmaatwebsite/excelインストールとエクセル出力方法」記事の環境(maatwebsite/excelのインストール、usersテーブルの内容を全てveiwに出力する 等)は準備出来てる前提とします。

出力するエクセルのview(blade.phpファイル)にstyle(スタイル)やサイズ(width、height)を記述

usersテーブルの「name」と「email」をエクセルに出力します。

出力するエクセルのセル装飾前のviewの記述

出力するエクセルのセル装飾前のview(/resources/views/exports/excelusers.blade.phpファイル)の記述は以下の通りです。

<p>userテーブル</p>
<table>
  <thead>
  <tr>
      <th>Name</th>
      <th>Email</th>
  </tr>
  </thead>
  <tbody>
  @foreach($users as $user)
      <tr>
          <td>{{ $user->name }}</td>
          <td>{{ $user->email }}</td>
      </tr>
  @endforeach
  </tbody>
</table>

 
セル装飾前のエクセル出力結果イメージ

セル装飾前のエクセル出力結果イメージ

出力するエクセルのセル装飾後のviewの記述

出力するエクセルのセル装飾後のview(/resources/views/exports/excelusers.blade.phpファイル)の記述は以下の通りです。

<?php
$margin_th1 = "<th width='2'></th>";	//エクセル左端(A列)余白
$margin_td1 = "<td></td>";	//エクセル左端(A列)余白
$style1='style="font-size:9px; border:1px solid #000000; text-align:center; vertical-align: middle;"';	//セルのstyle(装飾)
?>

<table>
<thead>
    <tr>
        <?php echo $margin_th1; ?>
        <th height="5"></th>
    </tr>
</thead>
<tbody>
    <tr>
        <?php echo $margin_td1; ?>
        <td colspan="2" height="24" style="font-size:18px; text-align:center;">userテーブル</td>
    </tr>
</tbody>
</table>

<table>
<thead>
    <tr>
	<?php echo $margin_th1; ?>
	<th width="11" height="30" <?php echo $style1; ?>>Name</th>
	<th width="22" <?php echo $style1; ?>>Email</th>
    </tr>
</thead>
<tbody>
    <tr>
	<?php echo $margin_td1; ?>
	<td <?php echo $style1; ?>>{{ $user->name }}</td>
	<td <?php echo $style1; ?>>{{ $user->email }}</td>
    </tr>
</tbody>
</table>

 

  • セルの書式(フォントサイズ、罫線、センター寄せ)を指定したい場合はstyleで指定します。
  • セルの高さは幅を指定したい場合はtd、thタグにwidthやheightを指定します。
  • 表の上・左端に余白をつけたい場合は空のtd、thタグを追加します。
  • セルを縦や横に結合したい場合はcolspanやrowspanを指定します。

 
※cssファイルでもセルの装飾が出来るか後日試してみます。

 
セル装飾後のエクセル出力結果イメージ

セル装飾後のエクセル出力結果イメージ

セルの装飾(フォントサイズ、罫線border、センター寄せ)がされてエクセルファイルに出力されてます。

 
※流用される場合は自己責任でお願いします。