AdSense

網頁

2023/10/10

使用 wkhtmltopdf 將HTML轉成PDF

wkhtmltopdf是一套可將HTML文件轉為PDF文件的命令工具(已停止更新)。下面是簡單用法。


範例環境:

  • MacBook Apple M1
  • macOS Ventura 13.0.1
  • Homebrew 4.1.14


安裝

開啟終端機,輸入brew update && brew install wkhtmltopdf --cask開始安裝wkhtmltopdf。

~% brew update && brew install wkhtmltopdf --cask
Already up-to-date.
==> Downloading https://formulae.brew.sh/api/cask.jws.json
######################################################################################################################################################################################################################################################### 100.0%
==> Downloading https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-2/wkhtmltox-0.12.6-2.macos-cocoa.pkg
==> Downloading from https://objects.githubusercontent.com/github-production-release-asset-2e65be/131323182/d62ac780-af25-11ea-979e-cf5f111e398c?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20231006%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20
######################################################################################################################################################################################################################################################### 100.0%
==> Installing Cask wkhtmltopdf
==> Running installer for wkhtmltopdf with sudo; the password may be necessary.
Password:
installer: Package name is wkhtmltox-0.12.6-2.macos-cocoa
installer: Installing at base path /
installer: The install was successful.
🍺  wkhtmltopdf was successfully installed!

輸入wkhtmltopdf --version檢視版本資訊。

~% wkhtmltopdf --version
wkhtmltopdf 0.12.6 (with patched qt)


把HTML轉為PDF

例如現在有一份HTML文件invoice_tw.html(參考至這裡並做些修改)如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>發票範本</title>

        <style>
            .invoice-box {
                max-width: 800px;
                margin: auto;
                padding: 30px;
                border: 1px solid #eee;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
                font-size: 16px;
                line-height: 24px;
                font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
                color: #555;
            }

            .invoice-box table {
                width: 100%;
                line-height: inherit;
                text-align: left;
            }

            .invoice-box table td {
                padding: 5px;
                vertical-align: top;
            }

            .invoice-box table tr td:nth-child(2) {
                text-align: right;
            }

            .invoice-box table tr.top td {
                padding: 10px 10px 40px;
            }

            .invoice-box table tr.top td.title {
                font-size: 45px;
                line-height: 45px;
                color: #333;
            }

            .invoice-box table tr.information td {
                padding: 0px 10px 40px;
            }

            .invoice-box table tr.heading td {
                background: #eee;
                border-bottom: 1px solid #ddd;
                font-weight: bold;
            }

            .invoice-box table tr.details td {
                padding-bottom: 20px;
            }

            .invoice-box table tr.item td {
                border-bottom: 1px solid #eee;
            }

            .invoice-box table tr.item.last td {
                border-bottom: none;
            }

            .invoice-box table tr.total td:nth-child(2) {
                border-top: 2px solid #eee;
                font-weight: bold;
            }

            /** RTL **/
            .invoice-box.rtl {
                direction: rtl;
                font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
            }

            .invoice-box.rtl table {
                text-align: right;
            }

            .invoice-box.rtl table tr td:nth-child(2) {
                text-align: left;
            }
        </style>
    </head>

    <body>
        <div class="invoice-box">
            <table cellpadding="0" cellspacing="0">
                <tr class="top">
                    <td class="title">
                        <img
                            src="https://sparksuite.github.io/simple-html-invoice-template/images/logo.png"
                            style="width: 100%; max-width: 300px"
                        />
                    </td>

                    <td>
                        發票 #: 123<br />
                        建立日期: 2023年1月1日<br />
                        到期日: 2023年2月1日
                    </td>
                </tr>

                <tr class="information">
                    <td>
                        閃光軟體股份有限公司.<br />
                        12345 陽光路<br />
                        陽光村, 加利福尼亞 12345
                    </td>

                    <td>
                        艾克梅有限公司<br />
                        約翰道爾<br />
                        john@example.com
                    </td>
                </tr>

                <tr class="heading">
                    <td>支付方式</td>

                    <td>支票 #</td>
                </tr>

                <tr class="details">
                    <td>支票</td>

                    <td>1000</td>
                </tr>

                <tr class="heading">
                    <td>項目</td>

                    <td>價格</td>
                </tr>

                <tr class="item">
                    <td>網站設計</td>

                    <td>$300.00</td>
                </tr>

                <tr class="item">
                    <td>托管日期(3個月)</td>

                    <td>$75.00</td>
                </tr>

                <tr class="item last">
                    <td>網域名稱(1年)</td>

                    <td>$10.00</td>
                </tr>

                <tr class="total">
                    <td></td>

                    <td>總額: $385.00</td>
                </tr>
            </table>
        </div>
    </body>
</html>

在HTML文件invoice_tw.html所在目錄,輸入命令wkhtmltopdf invoice_tw.html invoice_tw.pdfinvoice_tw.html轉換輸出為invoice_tw.pdf

% wkhtmltopdf invoice_tw.html invoice_tw.pdf
Loading pages (1/6)
Counting pages (2/6)
Resolving links (4/6)
Loading headers and footers (5/6)
Printing pages (6/6)
Done


效果比較

下面是invoice_tw.html在Chrome瀏覽器的模樣。



下面是invoice_tw.pdf的模樣。



若HTML中有使用一些特殊的CSS語法可能會跑版。



沒有留言:

AdSense