Skip to content

Instantly share code, notes, and snippets.

@oguna

oguna/index.html

Created August 1, 2019 22:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save oguna/73e2f92c8a83f70fa1381f1fee7cb2bd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save oguna/73e2f92c8a83f70fa1381f1fee7cb2bd to your computer and use it in GitHub Desktop.
Download ZIP
PaperFromToHTML with Vue.js
Raw
index.html
a<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="sheet.css">
<title>御請求書</title>
</head>
<body>
<div id="app">
<section class="no_print">
<h1>帳票データ入力用</h1>
<h2>管理番号</h2>
<input v-model="id" type="number" />
<h2>発行日</h2>
<input type="date" v-model="date" />
<h2>宛先</h2>
<select v-model="client">
<option>あいうえお株式会社</option>
<option>さしすせそ株式会社</option>
<option>たちつてと株式会社</option>
</select>
<h2>個数</h2>
<ul>
<li v-for="i of items" :key="i.name">
{{i.name}}
<input type="number" v-model="i.amount" />
</li>
</ul>
</section>
<section class="sheet">
<div class="row_1">
<h1 class="text-center">御請求書</h1>
</div>
<div class="row_2">
<ul class="text-right">
<li>No 00-{{id}}</li>
<li>{{date | datefilter}}</li>
</ul>
</div>
<div class="row_3">
<div class="col_1">
<ul>
<li>
<h2 class="customer_name">{{client}} 御中</h2>
</li>
<li>〒000-0000</li>
<li>東京都千代田区〇〇〇〇〇〇</li>
</ul>
</div>
<div class="col_2">
<ul>
<li>
<h2>かきくけこ商事株式会社</h2>
</li>
<li>〒000-0000</li>
<li>東京都千代田区〇〇〇〇〇〇</li>
<li>〇〇〇〇ビル〇Ｆ</li>
<li>TEL: 00-0000-0000</li>
<li>FAX: 00-0000-0000</li>
</ul>
<img class="stamp" src="stamp.png">
</div>
<div class="clear-element"></div>
</div>
<div class="row_4">
<p>下記のとおりご請求申し上げます。</p>
<table class="summary">
<tbody>
<tr>
<th>合計金額</th>
<td>\{{total | numfilter}}</td>
</tr>
</tbody>
</table>
</div>
<div class="row_5">
<table class="detail">
<thead>
<tr>
<th class="item">品名</th>
<th class="unit_price">単価</th>
<th class="amount">数量</th>
<th class="subtotal">金額</th>
</tr>
</thead>
<tbody>
<tr class="dataline" v-for="(item, index) in items" :key="index">
<td class="text-left"> {{item.name}} </td>
<td> {{item.price | numfilter}} </td>
<td> {{item.amount}} </td>
<td> {{item.price * item.amount | numfilter}} </td>
</tr>
<tr class="dataline">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="dataline">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="dataline">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="dataline">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="dataline">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="dataline">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="dataline">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="dataline">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="dataline">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="dataline">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="dataline">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="space" rowspan="3" colspan="2"> </td>
<th> 小計 </th>
<td> {{subtotal | numfilter}} </td>
</tr>
<tr>
<th> 消費税 </th>
<td> {{tax | numfilter}} </td>
</tr>
<tr>
<th> 合計 </th>
<td> {{total | numfilter}} </td>
</tr>
</tbody>
</table>
</div>
<ul>
<li>振込先</li>
<li>名義：カ）カキクケショウジ</li>
<li>〇〇銀行 〇〇支店 普通 00000000</li>
</ul>
<p>※お振込み手数料は御社ご負担にてお願い致します。</p>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
items: [
{
name: '品名AAAAA',
price: 1000,
amount: 3,
},
{
name: '品名BBBBB',
price: 1000,
amount: 5,
},
{
name: '品名CCCCC',
price: 1000000,
amount: 2,
},
],
id: 0,
date: '2019-01-01',
client: 'あいうえお株式会社'
},
computed: {
subtotal: function() {
let sum = 0;
for (let item of this.items) {
sum += item.price * item.amount
}
return sum;
},
tax: function() {
return this.subtotal * 0.08;
},
total: function() {
return this.subtotal + this.tax;
}
},
filters: {
numfilter: function(num) {
return String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
},
datefilter: function(date) {
return date.replace(/(\d+)-(\d+)-(\d+)/g, '$1年$2月$3日')
}
}
})
</script>
</body>
</html>
Raw
sheet.css
/* 印刷時の用紙設定 */
@page {
size: A4; /* 用紙サイズ */
margin: 0; /* ヘッダー・フッダーを無効化 */
}
/* 要素の初期化 */
* {
/* マージン・パディングをリセットした方がデザインしやすい */
margin: 0;
padding: 0;
/* デフォルトのフォント */
color: #191970;
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic,
sans-serif;
font-size: 11pt;
font-weight: normal;
/* 背景色・背景画像を印刷する（Chromeのみで有効） */
-webkit-print-color-adjust: exact;
}
/* リスト初期化 */
ul {
list-style: none;
padding-left: 0;
}
/* ページレイアウト (section.sheet を１ページとする) */
.sheet {
overflow: hidden;
position: relative;
box-sizing: border-box;
page-break-after: always;
/* 用紙サイズ A4 */
height: 297mm;
width: 210mm;
/* 余白サイズ */
padding-top: 32mm;
padding-left: 27mm;
padding-right: 27mm;
}
/* プレビュー用のスタイル */
@media screen {
body {
background: #e0e0e0;
}
.sheet {
background: white; /* 背景を白く */
box-shadow: 0 0.5mm 2mm rgba(0, 0, 0, 0.3); /* ドロップシャドウ */
margin: 5mm auto;
}
}
@media print {
.no_print {
display: none;
}
}
/* 汎用クラス */
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.clear-element {
clear: both;
}
/* 大枠の指定 */
div.row_1 {
height: 14mm;
}
div.row_2 {
height: 12mm;
}
div.row_3 {
height: 55mm;
}
div.row_3 div.col_1 {
width: 90mm;
float: left;
}
div.row_3 div.col_2 {
position: relative;
z-index: 2;
padding-top: 10mm;
float: left;
}
div.row_4 {
height: 18mm;
}
div.row_5 {
height: 120mm;
}
div.row_6 {
height: 18mm;
}
/* 個別のスタイル指定 */
/* タイトル */
h1 {
background: #3366cc;
font-size: 30px;
font-weight: normal;
letter-spacing: 30px;
color: #ffffff;
}
/* 顧客名・自社名 */
h2 {
font-size: 20px;
font-weight: normal;
}
/* 顧客名 */
h2.customer_name {
text-decoration: underline;
}
img.stamp{
position: absolute;
z-index: 1;
top: 10mm;
left: 48mm;
height: 17mm;
width: 17mm;
}
/* テーブル共通 */
table,
th,
td {
border: 1px #264d99 solid;
border-collapse: collapse;
padding: 1px 5px;
}
table th {
background: #3366cc;
font-weight: normal;
color: #ffffff;
}
table td {
text-align: right;
}
/* テーブル 総額欄 */
table.summary th {
font-size: 14pt;
width: 32mm;
}
table.summary td {
font-size: 14pt;
width: 40mm;
}
/* テーブル 明細欄 */
table.detail {
width: 100%;
}
table.detail tr {
height: 6mm;
}
table.detail th.item {
width: 50%;
}
table.detail th.unit_price {
width: 18%;
}
table.detail th.amount {
width: 14%;
}
table.detail th.subtotal {
width: 18%;
}
table.detail td.space {
border-left-style: hidden;
border-bottom-style: hidden;
}
table.detail tr.dataline:nth-child(odd) td {
background-color: #ccddff;
}
table.detail tr.dataline:nth-child(even) td {
background-color: #ffffff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment