Help us understand the problem. What is going on with this article?

Chromeを使って、画像ファイルをA4サイズでPDFにした

More than 1 year has passed since last update.

概要

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>
YamasakiKenta
特にありません。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした