勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)

  JavaScript

JavaScriptにてhtml2pdfというライブラリを使用することでHTML / CSSで作成したページをPDFファイルとしてダウンロードできるらしい。実際にありそうなのは領収書等のテンプレートファイルをPDFダウンロードさせるような形になると思うのでその方法をメモ。

 

html2pdf

公式サイト

https://ekoopmans.github.io/html2pdf.js/

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bundle.min.js"></script>

異なるバージョンを利用したい場合は以下から探す。

https://cdnjs.com/libraries/html2pdf.js

 

テンプレートファイル

公開は以下サイトの領収書テンプレートを利用させていただいた。

https://www.review-rank.net/?p=15883

 

サンプル

https://taitan916.info/sample/html2pdf/

 

ソースコード

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>html2pdf サンプル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
<!--
* {
    margin:0;
    padding:0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#container {
    margin:0px auto 0 auto;
    border:3px solid #000;
    text-align:center;
    margin:1em 1em;
    padding:2em 0;
    max-width:820px;
}
.inner {
    padding-left:2em;
    padding-right:2em;
}
#flexbox {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
/* 領収書 */
#flexbox div:nth-of-type(1) {
    font-size:1.4em;
    letter-spacing:1em;
}
/* 〇〇様 */
#flexbox div:nth-of-type(2) {
    font-size:1.4em;
    margin:auto 0 0 auto;
    padding-right:1em;
}
/* No. */
#flexbox div:nth-of-type(3) {
    font-size:0.7em;
    flex-basis:10em;
    margin:auto 0 0 0;
    border-bottom:1px solid #000;
    text-align:left;
}
/* 料金欄 */
#price {
    margin:0.5em 0 0;
    background:#eee;
    text-align:center;
    font-size:1.4em;
    letter-spacing:1em;
    line-height:2em;
}
#centerbox {
    width:60%;
    margin:0 auto;
}
/* 但し書き */
#proviso {
    margin-top:0.5em;
    font-size:0.8em;
    text-align:left;
}
/* 日付 */
#date {
    font-size:0.8em;
    text-align:right;
}

#flexlist {
    display: -webkit-flex;
    display: flex;
    margin-top:1em;
}
/* 収入印紙 */
#stamp {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width:5em;
    height:6em;
    border:1px solid #000;
    list-style-type:none;
    font-size:0.8em;
}
#stamp li {
    width:50%;
}
/* 内訳・税抜金額・消費税 */
#items {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column;
    flex-direction: column;
    font-size:0.8em;
    text-align:left;
    margin:0 0 0 2em;
    list-style-type:none;
    height:6em;
}
#items li {
    width:20em;
    border-bottom:1px solid #000;
}
-->
</style>
</head>
<body>
    <div id="container">
        <div id="flexbox" class="inner">
            <div>領収書</div>
            <div>hogehoge様</div>
            <div>No.123456789</div>
        </div>
        <div id="price">\110,000</div>
        <div id="centerbox">
            <div id="proviso">但</div>
            <div id="date">2024年1月31日　上記正に領収いたしました。</div>
        </div>
        <div id="flexlist" class="inner">
            <ul id="stamp">
                <li>収</li>
                <li>入</li>
                <li>印</li>
                <li>紙</li>
            </ul>
            <ul id="items">
                <li>内訳</li>
                <li>税抜金額 \100,000</li>
                <li>消費税等 \10,000</li>
            </ul>
        </div>
    </div>
    <div>
        <button id="pdf_dl">PDFダウンロード</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bundle.min.js"></script>
    <script>
    document.querySelector("#pdf_dl").addEventListener("click", () => {
        const container = document.querySelector("#container");
        const filename = "sample.pdf";
        html2pdf(container).save(filename);
    });
    </script>
</body>
</html>

 

所感

メリットとしてはPHPが利用できない環境(ASP内のページ等)でも使えるという点と、HTMLのページが割と綺麗に反映されるという点。デメリットとしては画像扱いになるようでPDF内で文字列のコピーや検索ができない点。

「PHPが利用できない環境(ASP内のページ等)でも使える」というのが個人的には大きいメリットなので引き出しとして覚えておきたい。

 

参考サイト

https://zenn.dev/collabostyle/articles/e3e1d693e4a19d

 - JavaScript

  関連記事

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)

あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...

jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...

JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について

JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...

JavaScriptでtableタグをエクセルファイル(xlsx)としてダウンロードさせる方法

table内のデータを何らかのファイルでダウンロードさせたい。通常PHPでCSV ...