웹 개발에서 파일 처리는 흔히 마주치는 작업 중 하나입니다. 특히, PDF 파일은 문서 교환의 표준 형식으로 자리 잡았기 때문에, 웹 애플리케이션에서 PDF 파일을 다루는 기능은 매우 중요합니다. 이 글에서는 HTML과 자바스크립트를 사용하여 PDF 파일을 변환, 합치기, 나누기 등 다양한 기능을 제공하는 웹 페이지를 만드는 방법을 안내하겠습니다.
준비사항
- HTML: 웹 페이지의 구조를 정의합니다.
- JavaScript: 사용자와의 상호작용 및 PDF 처리 로직을 담당합니다.
- PDF.js: PDF 파일을 렌더링하고 분석하는 JavaScript 라이브러리입니다.
- PDF-lib: PDF 파일 생성, 수정, 합치기 등의 작업을 위한 JavaScript 라이브러리입니다.
웹 페이지 구성
HTML을 사용하여 사용자 인터페이스를 구성합니다. 이 예제에서는 PDF 파일을 선택할 수 있는 입력 필드와, PDF 파일을 변환, 합치기, 나누기 기능을 수행할 버튼들을 추가합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>PDF 도구 웹 페이지</title>
</head>
<body>
<h1>PDF 도구</h1>
<input type="file" id="pdfInput" multiple>
<button onclick="convertPDF()">PDF 변환</button>
<button onclick="mergePDF()">PDF 합치기</button>
<button onclick="splitPDF()">PDF 나누기</button>
<script src="pdf.js"></script>
<script src="pdf-lib.js"></script>
<script src="app.js"></script>
</body>
</html>
JavaScript 로직 구현
PDF 변환 기능
PDF 변환 기능을 구현하기 전에, 해당 기능의 명확한 정의가 필요합니다. 여기서는 PDF 파일을 다른 포맷으로 변환하는 것이 아니라, 다른 파일 형식을 PDF로 변환하는 기능을 예로 들겠습니다.
async function convertPDF() {
// 파일 선택
const fileInput = document.getElementById('pdfInput');
const files = fileInput.files;
const pdfDoc = await PDFLib.PDFDocument.create();
// 선택된 파일을 PDF로 변환
for (const file of files) {
const text = await file.text();
const page = pdfDoc.addPage();
page.drawText(text);
}
// PDF 파일 저장 및 다운로드
const pdfBytes = await pdfDoc.save();
download(pdfBytes, "converted.pdf", "application/pdf");
}
PDF 합치기 기능
여러 PDF 파일을 선택하여 하나의 PDF 파일로 합치는 기능을 구현합니다.
async function mergePDF() {
const fileInput = document.getElementById('pdfInput');
const files = fileInput.files;
const pdfDoc = await PDFLib.PDFDocument.create();
// 선택된 PDF 파일들을 합치기
for (const file of files) {
const fileBytes = await file.arrayBuffer();
const sourcePdfDoc = await PDFLib.PDFDocument.load(fileBytes);
const copiedPages = await pdfDoc.copyPages(sourcePdfDoc, sourcePdfDoc.getPageIndices());
copiedPages.forEach(page => pdfDoc.addPage(page));
}
// 합쳐진 PDF 파일 저장 및 다운로드
const pdfBytes = await pdfDoc.save();
download(pdfBytes, "merged.pdf", "application/pdf");
}
PDF 나누기 기능
하나의 PDF 파일을 여러 개의 PDF 파일로 나누는 기능입니다. 이 기능은 보다 복잡할 수 있으므로, 사용자로부터 나누고자 하는 페이지 번호를 입력받는 간단한 예제로 구현해 보겠습니다.
async function splitPDF() {
const fileInput = document.getElementById('pdfInput');
const file = fileInput.files[0];
// 사용자로부터 페이지 번호 입력 받기 (예: "1,3,5")
const splitPagesInput = prompt("나누고 싶은 페이지 번호를 쉼표로 구분하여 입력하세요. (예: 1,3,5)");
const splitPages = splitPagesInput.split(",").map(num => parseInt(num.trim()) - 1); // 페이지 번호를 배열로 변환
const originalPdfDoc = await PDFLib.PDFDocument.load(await file.arrayBuffer());
const newPdfDoc = await PDFLib.PDFDocument.create();
// 선택된 페이지만 새로운 PDF에 추가
const copiedPages = await newPdfDoc.copyPages(originalPdfDoc, splitPages);
copiedPages.forEach(page => newPdfDoc.addPage(page));
// 나누어진 PDF 파일 저장 및 다운로드
const pdfBytes = await newPdfDoc.save();
download(pdfBytes, "split.pdf", "application/pdf");
}
이 기능은 사용자가 입력한 페이지 번호에 해당하는 페이지만을 새로운 PDF 파일로 생성합니다. 사용자가 여러 페이지 번호를 입력할 경우, 해당 페이지만을 포함하는 새로운 PDF 파일이 생성됩니다.
파일 다운로드 함수
앞서 언급된 모든 기능에서 생성된 PDF 파일을 사용자에게 다운로드할 수 있도록 돕는 download 함수를 구현합니다.
function download(data, filename, type) {
const blob = new Blob([data], {type: type});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
이 함수는 Blob 객체를 사용하여 메모리에서 파일을 생성하고, 이를 사용자가 다운로드할 수 있는 링크로 변환합니다. 사용자는 이 링크를 클릭하여 생성된 PDF 파일을 다운로드할 수 있습니다.
'IT 관련 Tip > HTML, JavaScript' 카테고리의 다른 글
| HTML과 JavaScript로 만드는 테트리스 게임: 초보자를 위한 웹 개발 입문 (0) | 2024.03.28 |
|---|---|
| HTML과 JavaScript로 계산기 만들기: 웹 개발 입문자를 위한 가이드 (0) | 2024.03.27 |
| HTML 태그 기초: 웹 개발의 첫걸음 (0) | 2024.03.27 |
