勉強したことのメモ

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

  関連記事

JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法

大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...

jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法

あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...

バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法

サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...

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

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

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...