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.pdf將invoice_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語法可能會跑版。
沒有留言:
張貼留言