검색결과 리스트
2024/11/01에 해당되는 글 1건
- 2024.11.01 PDF 파일 합치기 1
글
PDF 파일 합치기
아래는 html 소스 코드입니다.
---------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>PDF 합치기(Merge)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<style>
#file-list { list-style: none; padding: 0; }
#file-list li { padding: 8px; border: 1px solid #ccc; margin: 5px 0; display: flex; justify-content: space-between; align-items: center; }
.move-buttons { display: flex; gap: 5px; }
.move-buttons button { padding: 5px; }
</style>
</head>
<body>
<p><b>PDF 합치기</b>: 여려개의 PDF를 하나로 합쳐줍니다.</p>
<p>---------------------------------------------------------------------------</p>
<p>1. 아래 "파일 선택" 버튼을 누르고, 합칠 파일을 Ctrl 키를 누른 채 선택하세요.</p>
<input type="file" id="file-input" multiple accept="application/pdf" />
<p>2. 파일을 선택한 후 목록에서 ↑/↓ 화살표로 합칠 순서를 조정하세요.</p>
<ul id="file-list"></ul>
<p>3. 순서를 확인한 후 "PDF 합치기" 버튼을 누르세요.</p>
<button id="merge-button">PDF 합치기</button>
<script>
const fileInput = document.getElementById('file-input');
const fileList = document.getElementById('file-list');
// 파일 선택 시 리스트에 추가
fileInput.addEventListener('change', () => {
fileList.innerHTML = '';
Array.from(fileInput.files).forEach((file, index) => {
const li = document.createElement('li');
li.textContent = file.name;
li.dataset.index = index;
// 순서 변경 버튼 추가
const moveButtons = document.createElement('div');
moveButtons.classList.add('move-buttons');
const upButton = document.createElement('button');
upButton.textContent = '↑';
upButton.addEventListener('click', () => moveItem(li, -1));
const downButton = document.createElement('button');
downButton.textContent = '↓';
downButton.addEventListener('click', () => moveItem(li, 1));
moveButtons.appendChild(upButton);
moveButtons.appendChild(downButton);
li.appendChild(moveButtons);
fileList.appendChild(li);
});
});
// 리스트 아이템 순서 변경 함수
function moveItem(item, direction) {
const sibling = (direction === -1) ? item.previousElementSibling : item.nextElementSibling;
if (sibling) {
fileList.insertBefore(item, direction === -1 ? sibling : sibling.nextElementSibling);
}
}
// PDF 합치기
document.getElementById('merge-button').addEventListener('click', async () => {
const files = Array.from(fileList.children).map(li => fileInput.files[li.dataset.index]);
const mergedPdf = await PDFLib.PDFDocument.create();
for (let file of files) {
const arrayBuffer = await file.arrayBuffer();
const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);
const pages = await mergedPdf.copyPages(pdfDoc, pdfDoc.getPageIndices());
pages.forEach(page => mergedPdf.addPage(page));
}
const pdfBytes = await mergedPdf.save();
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'merged.pdf';
a.click();
URL.revokeObjectURL(url);
});
</script>
</body>
</html>
'[楞嚴] 생각 나누기 > [情] 사회복지정보화' 카테고리의 다른 글
| 구글 Apps Script로 후원신청서 만들기 (2) | 2024.09.30 |
|---|---|
| Apps Script를 활용해 스프레드 시트로 데이터 전송하기 (0) | 2024.09.23 |
| 폰트 저작권 이슈에 대한 점검 (0) | 2020.08.12 |
| 코로나19 상황에 대한 전화설문조사 결과 (0) | 2020.07.08 |
| QR코드를 활용한 출입자 관리 - 노인복지관용 (3) | 2020.06.24 |
RECENT COMMENT