Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8945

HTML + Chromeで名刺を作ってみよう

$
0
0
名刺のオンデマンド印刷に使うPDFデータをHTMLとChromeで作ってみたので、その際の備忘録です。 基本的なツール Google Chrome -- レンダリングの確認、PDFへの変換に利用する 技術的なポイント ページサイズは CSS の @media print { @page { size: 97mm 61mm; } } により指定する。 オンデマンド印刷の名刺データ入稿の際に3mmのマージン(断ち切り領域)が必要な場合が多いので一般的な名刺サイズ+両側3mmのマージンを取ったサイズをページサイズとして指定している。 上記の状態で Chrome の Save as PDF の操作を行うと、期待したサイズのPDFが生成できる。 一気に変換したい場合は、Google Chromeをコマンドラインから呼び出し、オプションで --print-to-pdf および --headless を与えてHTMLをPDFに変換すると楽。 いくつかのサイトで --disable-gpu オプションも推奨されていたので実験では使っているが効果は未確認。 長所 Chromeの場合、自動的にフォントは全部埋め込もうとするので、電子入稿の際にフォントの問題が発生しづらい。 CSSの知識があれば比較的簡単にレイアウトが管理できる。 Outputはブラウザで確認しながら進められる。 動作確認した環境 ソース一式: GitHub > aikige/html_business_card_template OS/Chrome % sw_vers ProductName: macOS ProductVersion: 12.1 BuildVersion: 21C52 % Google¥ Chrome --version Google Chrome 96.0.4664.110

Viewing all articles
Browse latest Browse all 8945

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>