HTML Code for Basic PDF Editor
This example renders the PDF and allows text annotations.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Editor</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
}
canvas {
border: 1px solid #ddd;
margin-top: 10px;
}
#controls {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>PDF Editor</h1>
<input type="file" id="fileInput" accept=".pdf">
<canvas id="pdfCanvas"></canvas>
<div id="controls">
<input type="text" id="textToAdd" placeholder="Enter text to add">
<button onclick="addTextToPdf()">Add Text</button>
</div>
<script>
let pdfDoc = null;
let currentPage = 1;
let pdfCanvas = document.getElementById("pdfCanvas");
let ctx = pdfCanvas.getContext("2d");
let pdfBytes = null;
// Load and render PDF
document.getElementById("fileInput").addEventListener("change", async function(e) {
const file = e.target.files[0];
const fileReader = new FileReader();
fileReader.onload = async function() {
pdfBytes = new Uint8Array(this.result);
pdfDoc = await pdfjsLib.getDocument(pdfBytes).promise;
renderPage(currentPage);
};
fileReader.readAsArrayBuffer(file);
});
// Render a specific page
async function renderPage(pageNumber) {
const page = await pdfDoc.getPage(pageNumber);
const viewport = page.getViewport({ scale: 1.5 });
pdfCanvas.width = viewport.width;
pdfCanvas.height = viewport.height;
await page.render({ canvasContext: ctx, viewport: viewport }).promise;
}
// Add text to PDF
async function addTextToPdf() {
if (!pdfBytes) return alert("Please upload a PDF file first.");
const text = document.getElementById("textToAdd").value;
if (!text) return alert("Please enter text to add.");
const pdfDocToEdit = await PDFLib.PDFDocument.load(pdfBytes);
const pages = pdfDocToEdit.getPages();
const firstPage = pages[0];
firstPage.drawText(text, {
x: 50,
y: 550,
size: 12,
color: PDFLib.rgb(0, 0, 1),
});
const pdfBytesEdited = await pdfDocToEdit.save();
download(pdfBytesEdited, "edited.pdf", "application/pdf");
}
// Download modified PDF
function download(data, filename, type) {
const blob = new Blob([data], { type: type });
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
URL.revokeObjectURL(link.href);
}
</script>
</body>
</html>
Explanation
File Upload: Users can upload a PDF file, which is then loaded and displayed on a canvas using the pdf.js library.
Render PDF: The PDF is rendered on an HTML canvas to display the first page.
Add Text: Using the pdf-lib library, users can add text to the first page of the PDF at specified coordinates.
Download Edited PDF: The edited PDF can be downloaded directly.
Note
For more advanced features (like resizing, changing pages, or more annotation options), you would need to expand the JavaScript logic or use additional libraries specialized in PDF editing.
