PDFの追加・削除ができるページ（備忘録として）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDFのページ追加・削除ができるページ</title>
<link rel="stylesheet" href="../style.css">
<script src="script/pdf-lib.min.js"></script>
</head>
<body>
<div id="header-placeholder"></div>
<div class="page-wrapper">
<aside id="sidebar">
<!-- Sidebar content will be injected here by JS -->
</aside>
<div class="content-wrapper">
<div class="main">
<h1 class="hyoudai" style="margin-bottom:0;">PDFのページ追加・削除ができるページ</h1>
<h3>① メインのPDFを読み込む（PDF A）</h3>
<input type="file" id="mainPdf" accept="application/pdf"><br><br>
<h3>② ページを削除</h3>
<label>削除するページ番号（1始まり）:
<input type="number" id="deletePage" min="1">
</label>
<button onclick="deletePage()">ページ削除</button><br><br>
<h3>③ 空白ページを追加</h3>
<label>追加する位置（1始まり）:
<input type="number" id="insertAt" min="1">
</label>
<button onclick="addBlankPage()">空白ページ追加</button><br><br>
<h3>④ 別のPDFを読み込んで挿入（PDF B）</h3>
<input type="file" id="insertPdf" accept="application/pdf"><br>
<label>挿入する位置（1始まり）:
<input type="number" id="insertPdfAt" min="1">
</label>
<button onclick="insertFromAnotherPdf()">別PDF挿入</button><br><br>
<h3>⑤ 編集済みPDFを保存</h3>
<button onclick="downloadPdf()">PDFをダウンロード</button>
</div>
</div>
</div>
<script src="../load_header.js"></script>
<script>
let pdfDoc = null;
// メインPDF読み込み
document.getElementById('mainPdf').addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file) return;
const buffer = await file.arrayBuffer();
pdfDoc = await PDFLib.PDFDocument.load(buffer);
alert("PDF A を読み込みました（ページ数: " + pdfDoc.getPageCount() + "）");
});
// ページ削除
function deletePage() {
const pageNum = parseInt(document.getElementById('deletePage').value);
if (!pdfDoc || isNaN(pageNum) || pageNum < 1 || pageNum > pdfDoc.getPageCount()) {
alert("有効なページ番号を入力してください");
return;
}
pdfDoc.removePage(pageNum - 1);
alert(`ページ ${pageNum} を削除しました`);
}
// 空白ページ追加
function addBlankPage() {
const index = parseInt(document.getElementById('insertAt').value);
const total = pdfDoc.getPageCount();
if (!pdfDoc || isNaN(index) || index < 1 || index > total + 1) {
alert("正しい位置を入力してください");
return;
}
const blank = pdfDoc.addPage();
const moved = pdfDoc.getPages().pop();
if (index <= total) {
pdfDoc.insertPage(index - 1, moved);
}
alert(`空白ページを ${index} ページ目に追加しました`);
}
// 別PDFを読み込んで挿入
async function insertFromAnotherPdf() {
const input = document.getElementById('insertPdf');
const insertAt = parseInt(document.getElementById('insertPdfAt').value);
if (!pdfDoc || !input.files[0] || isNaN(insertAt)) {
alert("メインPDFと挿入位置、別PDFの指定が必要です");
return;
}
const insertBuffer = await input.files[0].arrayBuffer();
const insertDoc = await PDFLib.PDFDocument.load(insertBuffer);
const copiedPages = await pdfDoc.copyPages(insertDoc, insertDoc.getPageIndices());
for (let i = 0; i < copiedPages.length; i++) {
pdfDoc.insertPage(insertAt - 1 + i, copiedPages[i]);
}
alert(`PDF B の ${copiedPages.length} ページを ${insertAt} ページ目に挿入しました`);
}
// 保存
async function downloadPdf() {
if (!pdfDoc) {
alert("PDFが読み込まれていません");
return;
}
const pdfBytes = await pdfDoc.save();
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'edited.pdf';
link.click();
}
</script>
</body>
</html>
コメント