Cargando



DOMPDF Primeros Pasos

Veremos cómo podemos generar archivos PDF's haciendo uso de PHP empleando una librería llamada DOMPDF.


oct 29 2015 21:28
Avanzado
oct 30 2015 13:15
Información, que es DOMPDF
Básicamente es una librería php que nos permite convertir un documento HTML a PDF, con lo cual nos facilita mucho la tarea de generar reportes en dicho formato, esta librería es de gran ayuda pues su facilidad de uso y rapidez de implementación la hace la hace ideal para usarla en nuestros proyectos.

Cabe destacar que existen muchas otras librerías que cumplen con este mismo propósito, sin embargo algunas de ellas pueden resultar difíciles de implementar ya que suelen utilizar etiquetas propias para crear el documento, o por su parte llegan a requerir que el desarrollador indique mediante coordenadas X,Y la posición de los elementos que deben aparecer en el pdf teniendo en cuenta el tamaño de la hoja, lo cual puede llegar a ser una total tortura para algunos desarrolladores ya que se puede llegar a perder demasiado tiempo tratando de organizar la posición del contenido del documento de manera que este se vea en la forma como debe verse.

Sin embargo la librería DOMPDF, nos hace un gran favor ya que es tan fácil de utilizar que simplemente debemos generar la página HTML y luego indicarle a la librería que genere a partir de ella un documento PDF conservando las proporciones indicadas en el HTML y en caso de que el contenido del archivo HTML supere el tamaño disponible en la página del documento pdf, la librería simplemente creará una página nueva en el documento con tal de abarcar la totalidad del HTML. Simplemente fácil y genial.


Ahora veamos cómo usarla!

Paso 1


Lo primero que debemos hacer será descargar la librería, para ello vamos a la siguiente dirección:

https://github.com/d...hive/master.zip

La descarga comenzara automáticamente…
Se trata de un archivo .zip cuyo peso equivale a unos 7Mb aproximadamente…
Una vez que termine la descarga iré a mi servidor local, ahora mismo estoy usando XAMPP por lo cual entrare a la ruta C:/xampp/htdocs y dentro de ella creare una nueva carpeta la cual contendrá los archivos que usare en este tutorial, la llamare “pdf”.

Posteriormente copiare el archivo descargado a esta carpeta que acabamos de crear, una vez copiado le daremos click derecho > extraer en dompdf-master. Se creara una nueva capeta con los archivos extraídos, esa nueva carpeta debería pesar alrededor de unos 16Mb. Dentro de ella encontraremos todos los archivos relacionados a la librería, sin embargo para usarla solo necesitaremos las carpetas “include”, “lib” y los archivos “d[color=rgb(37,37,37)]ompdf_config.custom.inc.php” y[/color] “dompdf_config.inc.php”. El resto de los archivos podremos borrarlos para ahorrar espacio de almacenamiento en nuestro servidor, de igual modo también podremos borrar el archivo .zip que copiamos anteriormente.


Imagen1.jpg



Imagen2.jpg



Paso 2


Ahora ya tenemos los archivos que necesitamos para crear nuestro pdf, ahora voy hacerles una pequeña demostración de cómo podemos crear nuestro documento utilizando php y dándole formato con html.

Lo que haremos será abrir nuestro editor de código y crear un nuevo documento php, al cual en este caso llamare “prueba.php” y lo guardare en la raíz de la carpeta “pdf” que cree al inicio del anterior.

Por tratarse de una prueba este archivo será el que quiero convertir a pdf, por lo cual en el hare directamente una llamada al fichero “dompdf_config.inc.php” con lo cual ya estaríamos cargando la librería. Veamos el código…
<?php 
# Cargamos la librería dompdf.
require_once 'dompdf-master/dompdf_config.inc.php';
?>

Recuerden colocar bien la ruta del fichero de lo se les mostrara un error diciendo que el directorio no existe…

Una vez hecho esto ya tenemos cargada la librería en nuestro archivo y por ende podemos trabajar con ella…

Ahora tendremos que generar el contenido que queremos que se muestre en el pdf, por lo cual haremos lo siguiente, crearemos una nueva variable php, en este caso la llamare “$html” y a esta variable le asignaremos contenido HTML englobándolo dentro de comillas simples de la siguiente manera…
# Contenido HTML del documento que queremos generar en PDF.
$html='
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ejemplo de Documento en PDF.</title>
</head>
<body>

<h2>¿Que es DOMPDF?</h2>

<p>Dompdf es una herramienta que permite leer un documento HTML y convertirlo a PDF. El objetivo de esta 
herramienta no es crear un documento estéticamente profesional y personalizado, sino permitir con el mismo
 documento HTML generar un documento PDF para que el usuario lo pueda descargar más facilmente.</p>
 
</body>
</html>';

Cabe destacar que en el contenido HTML podemos incluir cualquier cosa que pueda estar presente en cualquier documento pdf, imágenes, tablas, títulos, subtitulos etc.

Pero no basta con esto, una vez terminado el contenido HTML debemos crear un nuevo objeto de la clase DOMPDF, para esto creamos una variable “$mi$mipdf =” y le asignamos el valor “new DOMPDF();”

Posteriormente definimos el tamaño y la orientación del documento de salida, con respecto al tamaño podríamos definir estándares como “Leter, A4, Folio, entre otros” y en cuanto a la orientación podría ser “portrait o landscape”
# Instanciamos un objeto de la clase DOMPDF.
$mipdf = new DOMPDF();

# Definimos el tamaño y orientación del papel que queremos.
# O por defecto cogerá el que está en el fichero de configuración.
$mipdf ->set_paper("A4", "portrait");

Ahora procederemos a agregar una nueva línea donde cargaremos el contenido HTML y el tipo de codificación con la que se mostrará el documento.
# Cargamos el contenido HTML.
$mipdf ->load_html(utf8_decode($html));

Posteriormente con las siguientes líneas renderizamos o convertimos el documento a pdf y luego enviamos el fichero al navegador para que sea descargado por el cliente.
# Renderizamos el documento PDF.
$mipdf ->render();
 
# Enviamos el fichero PDF al navegador.
$mipdf ->stream('FicheroEjemplo.pdf');
?>

Sin embargo si lo probamos ahora mismo en nuestro navegador veras que hay un error, al parecer el archivo no carga y dice algo como que el directorio que hace referencia a cierta clase no puede ser localizado, tranquilo cálmate no te decepciones, no te hice perder tu tiempo, jamás lo haría… jajaja

Solo tenemos una cosita que corregir, veras ese error se nos presenta porque no hemos agregado fuentes personalizadas para renderizar nuestro documento, pero eso no es problema pues DOMPDF ya viene por defecto con una serie de fuentes comúnmente utilizadas en documentos pdf como Times new Roman o arial…


Por lo que para solucionar momentáneamente este pequeño inconveniente solo tendremos que abrir con el editor de código el archivo “dompdf_config.inc.php” y comentar la línea #332. Tal como les muestro en la imagen a continuación…


Imagen3.jpg



Una vez hecho esto ya podremos acceder al archivo “prueba.php” desde nuestro navegador y podemos ver que automáticamente se descarga el documento pdf.


Imagen4.jpg



Imagen5.jpg



Como vez ya hemos podido generar un pdf con esta librería, pero como vemos es texto plano, que pasa si lo queremos hacer un poco más vistoso, porque no agregarle estilos css y alguna imagen? Les parece?

Paso 3


Para seguir viendo la flexibilidad que nos ofrece DOMPDF, creamos una pequeña hoja de estilos para darle forma a nuestro documento y añadiremos una imagen.

Primero añadiremos una imagen a nuestro documento justo por debajo del párrafo que ya tenemos. Para mantener nuestros organizados crearemos una carpeta a la que llamare “images” justo en la raíz de la carpeta “pdf” creada en el paso 1, dentro de ella guardare la imagen a utilizar y en la misma ubicación creare una carpeta llamada “ccs” para la hoja de estilo que quiero realizar…
Entonces ahora simplemente agregare una línea en el archivo “prueba.php” para incluir esta imagen
<img src="images/imagen1.jpg" width="500" height="180">
Para añadir una hoja de estilo simplemente tendriamos que crearla y guardarla en la carpeta css y luego colocar el enlace a esta en el head del contenido HMTL presente en el fichero “prueba.php”

Probare con algo muy sencillo haciendo el titulo un poco más grande y colocándolo en color azul, el código css seria:
.titulo{
text-align: center;
font-size: 30px;
color: blue;
 };
Ahora solo añadiremos esta clase a la etiqueta de nuestro título de la siguiente manera
<h2 class="titulo">¿Que es DOMPDF?</h2>
Y el resultado en nuestro pdf sería el siguiente…


Imagen6.jpg



Ahora pueden usar css para personalizarlo como deseen, por ahora esto es todo…

Gracias por visitar mis tutoriales, espero les sea de ayuda, un saludo y como siempre en caso de dudas o comentarios dejenmelos acá abajo y con gusto les respondere oportunamente.

Les dejo támbien un archivo .zip con el material de este tutorial:

Fichero Adjunto  pdf20151029145905.zip   101,99K   1070 Descargas

¿Te ayudó este Tutorial?


1 Comentarios

Muy buena la explicacion amigo! pero yo estoy teniendo una falla con las imagenes.. no me cargan y me sale error en el servidor, pero si las comento el pdf se renderisa tranquilamente... 

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X