SPIRAL ナレッジサイト 開発情報・ナレッジ Webページに印刷ボタンを設置する方法

開発情報・ナレッジ

ver.2middle
投稿者： SPIRERS ナレッジ向上チーム 2023年7月13日 (木)

Webページに印刷ボタンを設置する方法

請求書など、Webページに表示された画面をそのまま印刷したいという要望をいただきました。
今回は、Webページをそのまま印刷するためのボタン設置の方法について、紹介いたします。

ボタン設置

ボタンの設置方法は、シンプルです。
下記のタグを設置するだけでボタンが表示され、押下されると印刷プレビューが開きます。

HTML
<button  onclick="window.print(); return false;">このページを印刷する</button >
※ ビジュアル設定では設定できません。

下記の JavaScriptをボタンとして表示させるHTMLタグに追加するになるので、デザインを自由にカスタマイズしていただいて問題ございません。

onclick="window.print(); return false;"

印刷時のデザイン

非表示箇所の調整
ボタン設置をそのまま設置すると印刷画面にボタンも表示されてしまいます。
ボタン以外にも印刷画面には表示させたなくない箇所がある際は、CSSを利用して印刷画面から非表示にすることができます。

CSS
@media print {
  .buttonBlock{
    display: none;
  }
}
@media print
は、印刷時にだけ適用される記述になります。
表示させたなくない箇所は
@media print
内のCSSで非表示になるよう記述してください。
サイズの調整
文書を印刷するときの調整では、
@page
を利用します。
A4サイズ（縦）で印刷を行う場合の例となります。

CSS
@page {
    size: A4 portrait; 
    margin: 0;
}
portrait
は縦長の設定で、
landscape
は横長になります。

画面上の表示部分も幅指定が必要です。
A4サイズ（縦）の場合、縦：297mm,横210mmとなります。
その他、余白等も含めてCSSを設定してください。

CSS
.pageBlock {
    width: 210mm;
    height: 297mm;
    box-sizing: border-box;
    page-break-after: auto;
    padding: 5mm;
    margin:auto;
}

デモ

マイクロソフトが公開している請求書 (一般的なデザイン)を Webページに表示させ、
印刷ができるように印刷ボタンを作成したデモとなります。
自身で画面を作成いただくこともできます。
デモはこちら
設定内容
1. ページ
ページでは、印刷ボタンと請求書を表示するための枠を作成しています。

HTML
<div class="buttonBlock">
    <button class="printBtn" onclick="window.print(); return false;">このページを印刷する</button>
</div>
<div class="pageBlock">
    <!-- フリーコンテンツブロック -->
</div>
CSS
@page {
    size: A4 portrait; 
    margin: 0;
}
@media print {
  .buttonBlock{
    display: none;
  }
}
/* CSSのリセット */
*{
    margin: 0;
    padding: 0;
}
.buttonBlock {
    margin: 15px 0;
    text-align: center;
}
.pageBlock {
    width: 210mm;
    height: 297mm;
    box-sizing: border-box;
    page-break-after: auto;
    padding: 5mm;
    margin:auto;
}
2. ブロック
HTMLの
<!-- フリーコンテンツブロック -->
箇所にフリーコンテンツブロック内に請求書を作成いたします。
請求書 (一般的なデザイン)をダウンロードします。
wordファイルに関しては、アプリで開き、名前を付けて保存を行うと保存時の拡張子が選べるので、Webページ（htm,HTML）で保存することで、HTMLに変換できます。
最後に保存した HTML を開きフリーコンテンツブロックに登録します。

HTML
<html>

<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=Generator content="Microsoft Word 15 (filtered)">
<style>
<!--
 /* Font Definitions */
 @font-face
	{font-family:"Cambria Math";
	panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
	{font-family:"Meiryo UI";
	panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
	{font-family:"\@Meiryo UI";}
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
	{margin-top:1.5pt;
	margin-right:0mm;
	margin-bottom:1.5pt;
	margin-left:0mm;
	line-height:92%;
	font-size:10.0pt;
	font-family:"Meiryo UI";
	color:#595959;}
h1
	{mso-style-link:"見出し 1 \(文字\)";
	margin-top:1.5pt;
	margin-right:0mm;
	margin-bottom:1.5pt;
	margin-left:0mm;
	line-height:92%;
	page-break-after:avoid;
	font-size:10.0pt;
	font-family:"Meiryo UI";
	color:#577188;
	text-transform:uppercase;
	font-weight:normal;}
h2
	{mso-style-link:"見出し 2 \(文字\)";
	margin-top:1.5pt;
	margin-right:0mm;
	margin-bottom:1.5pt;
	margin-left:0mm;
	line-height:92%;
	page-break-after:avoid;
	font-size:10.0pt;
	font-family:"Meiryo UI";
	color:#577188;
	text-transform:uppercase;}
h2.CxSpFirst
	{mso-style-link:"見出し 2 \(文字\)";
	margin-top:1.5pt;
	margin-right:0mm;
	margin-bottom:0mm;
	margin-left:0mm;
	line-height:92%;
	page-break-after:avoid;
	font-size:10.0pt;
	font-family:"Meiryo UI";
	color:#577188;
	text-transform:uppercase;}
h2.CxSpMiddle
	{mso-style-link:"見出し 2 \(文字\)";
	margin:0mm;
	line-height:92%;
	page-break-after:avoid;
	font-size:10.0pt;
	font-family:"Meiryo UI";
	color:#577188;
	text-transform:uppercase;}
h2.CxSpLast
	{mso-style-link:"見出し 2 \(文字\)";
	margin-top:0mm;
	margin-right:0mm;
	margin-bottom:1.5pt;
	margin-left:0mm;
	line-height:92%;
	page-break-after:avoid;
	font-size:10.0pt;
	font-family:"Meiryo UI";
	color:#577188;
	text-transform:uppercase;}
p.MsoHeader, li.MsoHeader, div.MsoHeader
	{mso-style-link:"ヘッダー \(文字\)";
	margin-top:1.5pt;
	margin-right:0mm;
	margin-bottom:1.5pt;
	margin-left:0mm;
	text-align:right;
	line-height:92%;
	font-size:10.0pt;
	font-family:"Meiryo UI";
	color:#595959;}
p.MsoTitle, li.MsoTitle, div.MsoTitle
	{mso-style-link:"表題 \(文字\)";
	margin-top:6.0pt;
	margin-right:0mm;
	margin-bottom:6.0pt;
	margin-left:0mm;
	line-height:92%;
	font-size:14.0pt;
	font-family:"Meiryo UI";
	color:white;
	text-transform:uppercase;}
p.MsoTitleCxSpFirst, li.MsoTitleCxSpFirst, div.MsoTitleCxSpFirst
	{mso-style-link:"表題 \(文字\)";
	margin-top:6.0pt;
	margin-right:0mm;
	margin-bottom:0mm;
	margin-left:0mm;
	line-height:92%;
	font-size:14.0pt;
	font-family:"Meiryo UI";
	color:white;
	text-transform:uppercase;}
p.MsoTitleCxSpMiddle, li.MsoTitleCxSpMiddle, div.MsoTitleCxSpMiddle
	{mso-style-link:"表題 \(文字\)";
	margin:0mm;
	line-height:92%;
	font-size:14.0pt;
	font-family:"Meiryo UI";
	color:white;
	text-transform:uppercase;}
p.MsoTitleCxSpLast, li.MsoTitleCxSpLast, div.MsoTitleCxSpLast
	{mso-style-link:"表題 \(文字\)";
	margin-top:0mm;
	margin-right:0mm;
	margin-bottom:6.0pt;
	margin-left:0mm;
	line-height:92%;
	font-size:14.0pt;
	font-family:"Meiryo UI";
	color:white;
	text-transform:uppercase;}
p.MsoClosing, li.MsoClosing, div.MsoClosing
	{mso-style-link:"結語 \(文字\)";
	margin-top:30.0pt;
	margin-right:0mm;
	margin-bottom:4.0pt;
	margin-left:256.3pt;
	line-height:92%;
	font-size:10.0pt;
	font-family:"Meiryo UI";
	color:#595959;}
p.MsoDate, li.MsoDate, div.MsoDate
	{mso-style-link:"日付 \(文字\)";
	margin-top:6.0pt;
	margin-right:0mm;
	margin-bottom:6.0pt;
	margin-left:0mm;
	text-align:right;
	line-height:92%;
	font-size:14.0pt;
	font-family:"Meiryo UI";
	color:white;
	text-transform:uppercase;}
strong
	{font-family:"Meiryo UI";
	font-style:normal;}
span.MsoPlaceholderText
	{color:gray;}
span.a
	{mso-style-name:"ヘッダー \(文字\)";
	mso-style-link:ヘッダー;
	font-family:"Meiryo UI";}
span.a0
	{mso-style-name:"表題 \(文字\)";
	mso-style-link:表題;
	font-family:"Meiryo UI";
	color:white;
	text-transform:uppercase;}
span.a1
	{mso-style-name:"結語 \(文字\)";
	mso-style-link:結語;
	font-family:"Meiryo UI";}
span.a2
	{mso-style-name:"日付 \(文字\)";
	mso-style-link:日付;
	font-family:"Meiryo UI";
	color:white;
	text-transform:uppercase;}
span.1
	{mso-style-name:"見出し 1 \(文字\)";
	mso-style-link:"見出し 1";
	font-family:"Meiryo UI";
	color:#577188;
	text-transform:uppercase;}
span.2
	{mso-style-name:"見出し 2 \(文字\)";
	mso-style-link:"見出し 2";
	font-family:"Meiryo UI";
	color:#577188;
	text-transform:uppercase;
	font-weight:bold;}
p.10, li.10, div.10
	{mso-style-name:"見出し 1 \(白\)​​";
	margin-top:4.0pt;
	margin-right:0mm;
	margin-bottom:4.0pt;
	margin-left:0mm;
	text-align:center;
	line-height:92%;
	font-size:10.0pt;
	font-family:"Meiryo UI";
	color:white;}
.MsoChpDefault
	{font-size:10.0pt;
	font-family:"Cambria",serif;
	color:#595959;}
.MsoPapDefault
	{margin-top:2.0pt;
	margin-right:0mm;
	margin-bottom:2.0pt;
	margin-left:0mm;}
 /* Page Definitions */
 @page WordSection1
	{size:595.3pt 841.9pt;
	margin:43.2pt 54.0pt 54.0pt 54.0pt;}
div.WordSection1
	{page:WordSection1;}
-->
</style>

</head>

<body lang=JA style='word-wrap:break-word'>

<div class=WordSection1>

<table class=MsoTable15Grid1LightAccent2 border=1 cellspacing=0 cellpadding=0
 summary="ヘッダーのレイアウト テーブル" width="100%" style='width:100.0%;border-collapse:
 collapse;border:none'>
 <tr>
  <td width=336 valign=top style='width:251.65pt;border:none;padding:0mm 0mm 0mm 0mm'>
  <p class=MsoNormal><span lang=EN-US>Sonu Jain, CPA</span><span lang=EN-US> </span></p>
  <p class=MsoNormal><span lang=EN-US>321 Sycamore, Albany, NY 98765</span><span
  lang=EN-US> </span></p>
  <p class=MsoNormal><span lang=EN-US><strong><span lang=EN-US><span
  lang=EN-US>電話</span></span></strong></span><span lang=EN-US> </span><span
  lang=EN-US><span lang=EN-US><span lang=EN-US>(123) 456-7890</span></span></span><span
  lang=EN-US> </span><span lang=EN-US><strong><span lang=EN-US><span
  lang=EN-US>FAX</span></span></strong></span><span lang=EN-US> </span><span
  lang=EN-US><span lang=EN-US><span lang=EN-US>(123) 456-7891</span></span></span></p>
  </td>
  <td width=336 valign=top style='width:252.35pt;border:none;padding:0mm .7pt 0mm 0mm'>
  <p class=MsoHeader></p>
  </td>
 </tr>
</table>

<p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>

<p class=MsoNormal style='margin-top:24.0pt'><span lang=EN-US>&nbsp;</span></p>

<table class=MsoTable15Grid4Accent5 border=1 cellspacing=0 cellpadding=0
 summary="最初のテーブルは請求書番号と日付、2 番目のテーブルは請求と配送の情報、3 番目のテーブルはメインの請求書テーブル、4 番目のテーブルは小計と合計です"
 width="100%" style='width:100.0%;border-collapse:collapse;border:none'>
 <tr>
  <td width=336 valign=top style='width:252.0pt;border:none;background:#577188;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoTitle><span lang=EN-US><span lang=EN-US><span lang=EN-US>請求書</span></span><span
  lang=EN-US><span lang=EN-US>番号</span></span></span><span lang=EN-US> </span><span
  lang=EN-US><span lang=EN-US><span lang=EN-US>1002</span></span></span></p>
  </td>
  <td width=336 valign=top style='width:252.0pt;border:none;background:#577188;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoDate><span lang=EN-US><span lang=EN-US><span lang=EN-US>日付</span></span></span><span
  lang=EN-US> </span><span lang=EN-US><span lang=EN-US><span lang=EN-US>11/10/22</span></span></span></p>
  </td>
 </tr>
</table>

<table class=MsoTable15Plain2 border=0 cellspacing=0 cellpadding=0
 summary="最初のテーブルは請求書番号と日付、2 番目のテーブルは請求と配送の情報、3 番目のテーブルはメインの請求書テーブル、4 番目のテーブルは小計と合計です"
 width="100%" style='width:100.0%;border-collapse:collapse;border:none'>
 <tr>
  <td width=168 valign=top style='width:126.0pt;border:none;border-bottom:solid #7E97AD 1.0pt;
  padding:16.55pt 5.75pt 0mm 5.75pt'>
  <h1><span lang=EN-US><span lang=EN-US><span lang=EN-US>請求先</span></span></span><span
  lang=EN-US> </span></h1>
  </td>
  <td width=168 valign=top style='width:126.0pt;border:none;border-bottom:solid #7E97AD 1.0pt;
  padding:16.55pt 5.75pt 0mm 5.75pt'>
  <h1><span lang=EN-US><span class=MsoPlaceholderText><span lang=EN-US
  style='color:#577188'><span lang=EN-US>配送先</span></span></span></span><span
  lang=EN-US> </span></h1>
  </td>
  <td width=336 valign=top style='width:252.0pt;border:none;border-bottom:solid #7E97AD 1.0pt;
  padding:16.55pt 5.75pt 0mm 5.75pt'>
  <h1><span lang=EN-US><span lang=EN-US><span lang=EN-US>説明</span></span></span><span
  lang=EN-US> </span></h1>
  </td>
 </tr>
 <tr>
  <td width=168 valign=top style='width:126.0pt;border:none;padding:0mm 5.75pt 15.85pt 5.75pt'>
  <p class=MsoNormal><span lang=EN-US>Cataldo Capon<br>
  234 5th Ave.<br>
  Madison, WI 12345</span><span lang=EN-US> </span></p>
  </td>
  <td width=168 valign=top style='width:126.0pt;border:none;padding:0mm 5.75pt 15.85pt 5.75pt'>
  <p class=MsoNormal><span lang=EN-US><span lang=EN-US><span lang=EN-US>受取人と同じ</span></span></span></p>
  </td>
  <td width=336 valign=top style='width:252.0pt;border:none;padding:0mm 5.75pt 15.85pt 5.75pt'>
  <p class=MsoNormal style='margin-bottom:2.0pt'><span lang=EN-US><span
  lang=EN-US><span lang=EN-US>速達の夜間配送</span></span></span><span lang=EN-US> </span></p>
  </td>
 </tr>
</table>

<table class=a3 border=1 cellspacing=0 cellpadding=0
 summary="最初のテーブルは請求書番号と日付、2 番目のテーブルは請求と配送の情報、3 番目のテーブルはメインの請求書テーブル、4 番目のテーブルは小計と合計です"
 width="100%" style='width:100.0%;border-collapse:collapse;border:none'>
 <thead>
  <tr>
   <td width=134 style='width:100.8pt;border:none;background:#577188;
   padding:0mm 5.4pt 0mm 5.4pt'>
   <p class=10 align=left style='text-align:left'><span lang=EN-US
   style='text-transform:uppercase'><span lang=EN-US><span lang=EN-US>数量</span></span></span><span
   lang=EN-US style='text-transform:uppercase'> </span></p>
   </td>
   <td width=269 style='width:201.6pt;border:none;background:#577188;
   padding:0mm 5.4pt 0mm 5.4pt'>
   <p class=10 align=left style='text-align:left'><span lang=EN-US
   style='text-transform:uppercase'><span lang=EN-US><span lang=EN-US>内容</span></span></span><span
   lang=EN-US style='text-transform:uppercase'> </span></p>
   </td>
   <td width=134 style='width:100.8pt;border:none;background:#577188;
   padding:0mm 5.4pt 0mm 5.4pt'>
   <p class=10 align=right style='text-align:right'><span lang=EN-US
   style='text-transform:uppercase'><span lang=EN-US><span lang=EN-US>単価</span></span></span><span
   lang=EN-US style='text-transform:uppercase'> </span></p>
   </td>
   <td width=134 style='width:100.8pt;border:none;background:#577188;
   padding:0mm 5.4pt 0mm 5.4pt'>
   <p class=10 align=right style='text-align:right'><span style='text-transform:
   uppercase'>合計</span></p>
   </td>
  </tr>
 </thead>
 <tr>
  <td width=134 style='width:100.8pt;border-top:solid #D9D9D9 1.0pt;border-left:
  none;border-bottom:solid #D9D9D9 1.0pt;border-right:none;padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US><span lang=EN-US><span lang=EN-US>12</span></span></span><span
  lang=EN-US> </span></p>
  </td>
  <td width=269 style='width:201.6pt;border-top:solid #D9D9D9 1.0pt;border-left:
  none;border-bottom:solid #D9D9D9 1.0pt;border-right:none;padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US><span lang=EN-US><span lang=EN-US>社外秘ファイル</span></span><span
  lang=EN-US><span lang=EN-US> </span></span><span lang=EN-US><span lang=EN-US>ボックス</span></span></span><span
  lang=EN-US> </span></p>
  </td>
  <td width=134 style='width:100.8pt;border-top:solid #D9D9D9 1.0pt;border-left:
  none;border-bottom:solid #D9D9D9 1.0pt;border-right:none;padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US><span
  lang=EN-US><span lang=EN-US>75.00</span></span></span><span lang=EN-US> </span></p>
  </td>
  <td width=134 style='width:100.8pt;border-top:solid #D9D9D9 1.0pt;border-left:
  none;border-bottom:solid #D9D9D9 1.0pt;border-right:none;padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US><span
  lang=EN-US><span lang=EN-US>900.00</span></span></span><span lang=EN-US> </span></p>
  </td>
 </tr>
 <tr>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=269 style='width:201.6pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
 </tr>
 <tr>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=269 style='width:201.6pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
 </tr>
 <tr>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=269 style='width:201.6pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
 </tr>
 <tr>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=269 style='width:201.6pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
 </tr>
 <tr>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=269 style='width:201.6pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
 </tr>
 <tr>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=269 style='width:201.6pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
 </tr>
 <tr>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=269 style='width:201.6pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
 </tr>
 <tr>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=269 style='width:201.6pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
 </tr>
 <tr>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=269 style='width:201.6pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
 </tr>
 <tr>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=269 style='width:201.6pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
 </tr>
 <tr>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=269 style='width:201.6pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
 </tr>
 <tr>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=269 style='width:201.6pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
 </tr>
 <tr>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #A6A6A6 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=269 style='width:201.6pt;border:none;border-bottom:solid #A6A6A6 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #A6A6A6 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
  <td width=134 style='width:100.8pt;border:none;border-bottom:solid #A6A6A6 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US>&nbsp;</span></p>
  </td>
 </tr>
</table>

<div align=right>

<table class=MsoTable15Grid1LightAccent1 border=1 cellspacing=0 cellpadding=0
 summary="最初のテーブルは請求書番号と日付、2 番目のテーブルは請求と配送の情報、3 番目のテーブルはメインの請求書テーブル、4 番目のテーブルは小計と合計です"
 width="50%" style='width:50.0%;border-collapse:collapse;border:none'>
 <tr style='height:20.15pt'>
  <td width=202 valign=top style='width:151.2pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt;height:20.15pt'>
  <h1 style='margin-top:4.0pt;margin-right:0mm;margin-bottom:4.0pt;margin-left:
  0mm'><span lang=EN-US><span lang=EN-US><span lang=EN-US>小計</span></span></span><span
  lang=EN-US> </span></h1>
  </td>
  <td width=134 valign=top style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt;height:20.15pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US
  style='color:#577188'><span lang=EN-US><span lang=EN-US>900.00</span></span></span></p>
  </td>
 </tr>
 <tr style='height:20.15pt'>
  <td width=202 valign=top style='width:151.2pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt;height:20.15pt'>
  <h1 style='margin-top:4.0pt;margin-right:0mm;margin-bottom:4.0pt;margin-left:
  0mm'><span lang=EN-US><span lang=EN-US><span lang=EN-US>消費税</span></span></span><span
  lang=EN-US> </span></h1>
  </td>
  <td width=134 valign=top style='width:100.8pt;border:none;border-bottom:solid #D9D9D9 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt;height:20.15pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US
  style='color:#577188'><span lang=EN-US><span lang=EN-US>45.00</span></span></span><span
  lang=EN-US style='color:#577188'> </span></p>
  </td>
 </tr>
 <tr style='height:20.15pt'>
  <td width=202 valign=top style='width:151.2pt;border:none;border-bottom:solid #A6A6A6 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt;height:20.15pt'>
  <h1 style='margin-top:4.0pt;margin-right:0mm;margin-bottom:4.0pt;margin-left:
  0mm'><span lang=EN-US><span lang=EN-US><span lang=EN-US>送料と手数料</span></span></span><span
  lang=EN-US> </span></h1>
  </td>
  <td width=134 valign=top style='width:100.8pt;border:none;border-bottom:solid #A6A6A6 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt;height:20.15pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US
  style='color:#577188'><span lang=EN-US><span lang=EN-US>24.99</span></span></span></p>
  </td>
 </tr>
 <tr style='height:20.15pt'>
  <td width=202 valign=top style='width:151.2pt;border:none;border-bottom:solid #A6A6A6 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt;height:20.15pt'>
  <h2 style='margin-top:4.0pt;margin-right:0mm;margin-bottom:4.0pt;margin-left:
  0mm'><span lang=EN-US><span lang=EN-US><span lang=EN-US>総額</span></span></span><span
  lang=EN-US> </span><span lang=EN-US><span lang=EN-US><span lang=EN-US>(</span></span><span
  lang=EN-US><span lang=EN-US>日付</span></span></span><span lang=EN-US> </span><span
  lang=EN-US><span lang=EN-US><span lang=EN-US>12/30/22)</span></span></span></h2>
  </td>
  <td width=134 valign=top style='width:100.8pt;border:none;border-bottom:solid #A6A6A6 1.0pt;
  padding:0mm 5.4pt 0mm 5.4pt;height:20.15pt'>
  <p class=MsoNormal align=right style='text-align:right'><span lang=EN-US
  style='color:#577188'><span lang=EN-US><span lang=EN-US>969.99</span></span></span></p>
  </td>
 </tr>
</table>

</div>

<p class=MsoClosing><span lang=EN-US><span lang=EN-US><span lang=EN-US>ご利用ありがとうございます。</span></span></span><span
lang=EN-US> </span></p>
<p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>
</div>
</body>
</html>
※ 今回は、ロゴ画像部分は使用していないため、削除しております。

以上で完成となります。
今回は値を入れておりませんが、レコードアイテムで作成し、Thymeleaf を使って自動で値が入るようにすることも可能なので、 ぜひお試しください。

注意点

・ブラウザによって表示のされ方や印刷時の文字サイズ等が変わる可能性があるので、ご注意ください。
・印刷画面でCSSが当たっていない場合は、印刷オプションで「背景のグラフィックス」または、「背景画像を印刷する」にチェックを入れてください。
・ページタイトルやURLを表示させたくない場合は、印刷オプションで余白なしに設定してください。
ニュースレターを受け取る
解決しない場合はこちら コンテンツに関しての
要望はこちら

関連記事

もっと見る かくす