概要
ZIP本をPDFに変換するお話です。
GoogleDriveで、ZIP本を見るのが面倒なので変換しました。
環境
- Chrome
- windows
手順
1.htmlファイルの作成
2.chromeで開く
3.印刷 ( PDF )
コード
下のコードをindex.htmlで保存し、ブラウザで開いて(ドラッグするだけ)、印刷(CTRL-P)するだけです。
- jpgファイルは、環境に合わせて増やします。
- プレビュー風に表示しています。
- ページ番号を表示しています。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
max-height: 100%;
}
.a4 {
width: 210mm;
height: 297mm;
/* border: 1px solid #333; */
page-break-after: always;
display: block;
overflow: hidden;
}
@page {
margin: 0mm;
}
@media screen {
html, body {
width: 100%;
}
body {
background: #eee;
counter-reset: sheet;
}
.a4 {
background: white;
box-shadow: 0 .5mm .2mm rgba(0,0,0.3);
margin: 5mm;
display: inline-block;
position: relative;
}
.a4:after {
counter-increment: sheet;
content: counter(sheet);
position: absolute;
padding: .5mm;
background: #fff;
top: 0px;
left: 0px;
}
}
</style>
</head>
<body>
<div class="a4"><img src="001.jpg"></div>
<div class="a4"><img src="002.jpg"></div>
<div class="a4"><img src="003.jpg"></div>
<div class="a4"><img src="004.jpg"></div>
</body>
</html>