Crear una vista previa de un PDF en una página web utilizando PHP, HTML y JavaScript implica combinar diferentes tecnologías. A continuación, te proporcionaré un tutorial completo sobre cómo lograrlo:
Paso 1: Estructura de Archivos
Crea una estructura de carpetas para tu proyecto:
project-folder/
|-- index.html
|-- pdf-preview.php
|-- build/
| |-- pdf.js
|-- pdfs/
| |-- example.pdf
...
Paso 2: HTML y JavaScript
index.html: Crea una página HTML básica que contenga un botón para cargar y mostrar la vista previa del PDF.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Preview</title>
<script src="build/pdf.js"></script>
</head>
<body>
<h1>PDF Preview Example</h1>
<input type="file" id="pdfInput" accept=".pdf">
<div id="pdfContainer"></div>
<script>
const pdfInput = document.getElementById('pdfInput');
const pdfContainer = document.getElementById('pdfContainer');
pdfInput.addEventListener('change', function(event) {
const file = event.target.files[0];
const fileURL = URL.createObjectURL(file);
renderPDF(fileURL);
});
function renderPDF(url) {
const pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.getDocument(url).promise.then(pdfDoc => {
pdfDoc.getPage(1).then(page => {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const viewport = page.getViewport({ scale: 1 });
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({
canvasContext: context,
viewport: viewport
}).promise.then(() => {
pdfContainer.innerHTML = ''; // Limpiar cualquier contenido anterior
pdfContainer.appendChild(canvas);
});
});
});
}
</script>
</body>
</html>
pdf.js: Descarga la librería PDF.js desde https://mozilla.github.io/pdf.js/getting_started/ . Coloca el archivo pdf.js en la carpeta js de tu proyecto.
Paso 3: back-end PHP
pdf-preview.php: Crea un archivo PHP que se encargue de recibir el archivo PDF, guardarlo y generar su URL.
<?php
if ($_FILES['pdf']['error'] === UPLOAD_ERR_OK) {
$targetDir = 'pdfs/';
$targetFile = $targetDir . basename($_FILES['pdf']['name']);
if (move_uploaded_file($_FILES['pdf']['tmp_name'], $targetFile)) {
echo json_encode(['url' => $targetFile]);
} else {
echo json_encode(['error' => 'Error uploading the file.']);
}
} else {
echo json_encode(['error' => 'File upload error.']);
}
?>
Paso 4: Ejecución
Coloca todos los archivos en sus respectivas carpetas según la estructura mencionada anteriormente.
Abre un servidor local para tu proyecto, por ejemplo, utilizando PHP Built-in Server:
Abre tu navegador y accede a http://localhost:8000 para probar la aplicación.
Cuando cargues un archivo PDF en la página web, el script JavaScript utilizará PDF.js para renderizar cada página del PDF en un canvas en el elemento pdfContainer.
Recuerda que este es un ejemplo básico para mostrar una vista previa de un PDF en una página web. Puedes personalizar y mejorar la aplicación agregando más características según tus necesidades.
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias