第3回フロントエンド勉強会 in 山陰で発表した際のサンプルコード。
- フロントエンド技術のみによる帳票印刷機能を作ってみる
- 印刷プレビュー画面
- Paged Media (CSS3) による用紙、印刷のコントロール
https://speakerdeck.com/hidakatsuya/frontend-study-group-in-sannin-3rd (Speaker Deck)
- index.html をブラウザで開く
- Cmd+P などで印刷ダイアログを開き印刷する
index.html の
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>請求書 - 印刷プレビュー</title>
<link rel="stylesheet" href="style.css" type="text/css">
<style>@page { size: A4 }</style>
</head>
<body class="A4">
<section class="sheet">@page { size: A4 } と <body class="A4"> を変更する。
@page...- 印刷時の用紙の定義<body...- プレビュー画面用の用紙サイズスタイル- style.css での定義が必要
実用したい場合は https://github.com/cognitom/paper-css を使えば良いと思います。
2017 (c) Katsuya Hidaka.