|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
|
<title>Editor de PDF</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.min.js"></script> |
|
|
<style> |
|
|
canvas { |
|
|
border: 1px solid #ccc; |
|
|
margin: 10px; |
|
|
cursor: crosshair; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 text-gray-800 min-h-screen flex flex-col items-center p-6"> |
|
|
|
|
|
<h1 class="text-3xl font-bold mb-6">📄 Editor de PDF</h1> |
|
|
|
|
|
<input type="file" id="pdfInput" accept="application/pdf" class="mb-4 border p-2 rounded" /> |
|
|
|
|
|
<div class="flex space-x-4 mb-4"> |
|
|
<button id="prevPage" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Página Anterior</button> |
|
|
<button id="nextPage" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Próxima Página</button> |
|
|
<span id="pageInfo" class="text-lg self-center">Página 1</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
<canvas id="pdfCanvas" class="bg-white shadow-lg"></canvas> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<button id="addTextBtn" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 mr-2">Adicionar Texto</button> |
|
|
<button id="addRectBtn" class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600 mr-2">Adicionar Retângulo</button> |
|
|
<button id="downloadBtn" class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600">Baixar como Imagem</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const fileInput = document.getElementById('pdfInput'); |
|
|
const canvas = document.getElementById('pdfCanvas'); |
|
|
const ctx = canvas.getContext('2d'); |
|
|
const prevPageBtn = document.getElementById('prevPage'); |
|
|
const nextPageBtn = document.getElementById('nextPage'); |
|
|
const pageInfo = document.getElementById('pageInfo'); |
|
|
const addTextBtn = document.getElementById('addTextBtn'); |
|
|
const addRectBtn = document.getElementById('addRectBtn'); |
|
|
const downloadBtn = document.getElementById('downloadBtn'); |
|
|
|
|
|
let pdfDoc = null; |
|
|
let currentPage = 1; |
|
|
|
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.worker.min.js'; |
|
|
|
|
|
fileInput.addEventListener('change', async (e) => { |
|
|
const file = e.target.files[0]; |
|
|
if (!file) return; |
|
|
const fileReader = new FileReader(); |
|
|
fileReader.onload = async () => { |
|
|
pdfDoc = await pdfjsLib.getDocument({ data: fileReader.result }).promise; |
|
|
currentPage = 1; |
|
|
renderPage(currentPage); |
|
|
}; |
|
|
fileReader.readAsBinaryString(file); |
|
|
}); |
|
|
|
|
|
function renderPage(pageNumber) { |
|
|
if (!pdfDoc) return; |
|
|
pdfDoc.getPage(pageNumber).then(async (page) => { |
|
|
const viewport = page.getViewport({ scale: 1.5 }); |
|
|
canvas.width = viewport.width; |
|
|
canvas.height = viewport.height; |
|
|
await page.render({ canvasContext: ctx, viewport }).promise; |
|
|
pageInfo.textContent = `Página ${pageNumber} de ${pdfDoc.numPages}`; |
|
|
}); |
|
|
} |
|
|
|
|
|
prevPageBtn.addEventListener('click', () => { |
|
|
if (currentPage > 1) { |
|
|
currentPage--; |
|
|
renderPage(currentPage); |
|
|
} |
|
|
}); |
|
|
|
|
|
nextPageBtn.addEventListener('click', () => { |
|
|
if (currentPage < pdfDoc?.numPages) { |
|
|
currentPage++; |
|
|
renderPage(currentPage); |
|
|
} |
|
|
}); |
|
|
|
|
|
addTextBtn.addEventListener('click', () => { |
|
|
const text = prompt("Digite o texto:"); |
|
|
if (text) { |
|
|
ctx.fillStyle = 'red'; |
|
|
ctx.font = '20px Arial'; |
|
|
ctx.fillText(text, 50, 50); |
|
|
} |
|
|
}); |
|
|
|
|
|
addRectBtn.addEventListener('click', () => { |
|
|
ctx.strokeStyle = 'blue'; |
|
|
ctx.lineWidth = 2; |
|
|
ctx.strokeRect(100, 100, 150, 80); |
|
|
}); |
|
|
|
|
|
downloadBtn.addEventListener('click', () => { |
|
|
const link = document.createElement('a'); |
|
|
link.download = `pagina_${currentPage}.png`; |
|
|
link.href = canvas.toDataURL(); |
|
|
link.click(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
