目標
相信大家在做專案的時候不免會遇到一些要輸出報表，或輸出什麼單什麼單的時候。然而通常我們用的技術越簡單，對專案開發速度的提升跟交接的難易度也越低。
而這個方法，真的是小編所能找到最簡單的方法了，過程中只有 Html 跟 CSS ，甚至一行 JS 都不需要有！(範例中那行是方便大家輸出跟觀察，直接把print指令寫好了)這對目前是前端工程師的小編來說，根本是逆天的簡單(當然對各位大大來說也是一樣啦 )，而唯一要做的前置作業，就是去查出你要輸出的紙張的size，必要時再去弄一張版型的圖片，當然圖片大小也要調得一樣，這樣可以方便做細部的調整。
廢話不多說我們就直接開始吧。
Html:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="book" id="app">
<div class="page">
<div class="subpage">
page1/2
</div>
</div>
<div class="page">
<div class="subpage">
page2/2
</div>
</div>
</div>
</body>
<sciript>widnow.print()</script>
</html>
上網查了一下，A4 size = 210mm*297mm，那我們就開始寫CSS吧
CSS:
body {width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 210mm; /*隨著紙張大小異動*/
min-height: 297mm;/*隨著紙張大小異動*/
padding: 20mm;
margin: 10mm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 257mm;/*隨著紙張大小異動*/
outline: 2cm #FFEAEA solid;
}
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;/*隨著紙張大小異動*/
height: 297mm; /*隨著紙張大小異動*/
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
小結
如果有需要，可以直接在page裡面加入 background-image，自行加入要列印單子的版型，這樣可以快速調整到自己想要的位置，甚至可以儲 positon 到資料庫，因應各家不同廠商的單子。光想到就內牛滿面。
小編過足了兩年都過著用 position:releative 去微調每個欄位，然後再列印出來，看到底還差多少，然後硬體不同還會跑版，一整個吐血，無形中不知道浪費了多少紙張，讓北極熊唾棄了幾次，所以後來小編終於受不了良心譴責，離開了那間公司，哈。
不過就這樣短短的程式碼，確實簡單又便利。留起來筆記，也希望可以幫助正在為報表所苦的朋友們，也歡迎大家留言或寄信給我討論
沒有留言:
張貼留言