はい、PDFを結合するアプリを作成しましょう。以下が実装例です。
```html
<!DOCTYPE html>
<html>
<head>
<title>PDF Merger</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
#fileInput {
margin-bottom: 20px;
}
#mergeButton {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>PDF Merger</h1>
<input type="file" id="fileInput" multiple>
<br>
<button id="mergeButton">Merge PDFs</button>
<div id="result"></div>
<script>
document.getElementById('mergeButton').addEventListener('click', function() {
var fileInput = document.getElementById('fileInput');
var files = fileInput.files;
if (files.length < 2) {
document.getElementById('result').innerText = "Please select at least 2 PDF files.";
return;
}
var mergedPdf = new PDFDocument();
for (var i = 0; i < files.length; i++) {
var reader = new FileReader();
reader.onload = function(event) {
var data = event.target.result;
var pdf = PDFJS.getDocument({data: data});
pdf.promise.then(function(pdfDoc) {
for (var j = 1; j <= pdfDoc.numPages; j++) {
pdfDoc.getPage(j).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext).then(function() {
mergedPdf.addPage(page);
});
});
}
});
};
reader.readAsArrayBuffer(files[i]);
}
reader.onloadend = function() {
mergeFinish();
};
function mergeFinish() {
mergedPdf.save('merged.pdf');
document.getElementById('result').innerText = "PDFs successfully merged!";
}
});
</script>
</body>
</html>
```
このアプリは、ファイル選択ボタン（`<input type="file">`）と「Merge PDFs」というボタンが表示されます。ユーザーが2つ以上のPDFファイルを選択して「Merge PDFs」ボタンをクリックすると、選択されたPDFファイルが結合され、`merged.pdf`という名前のファイルとして保存されます。結合が完了すると「PDFs successfully merged!」とメッセージが表示されます。
ジョークを追加しますか？
