概要

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>