Cómo imprimir contenido dinámicamente mediante Javascript, jQuery y PHP

Imprimir es una característica muy útil para cualquier sección que gestione datos. Generalmente, la opción de imprimir la solemos utilizar en cualquier aplicación web para guardar datos que utilizaremos de modo offline. Existen un montón de plugins para imprimir contenido de una página web utilizando jQuery. También puedes imprimir el contenido de una página mediante el método window print() de Javascript. En ese caso, se imprimirán los datos estáticos o el contenido del div de la ventana actual.

Puedes imprimir también el contenido de un div especifico mediante Javascript. Pero, en ciertos casos necesitas que el usuario pueda imprimir información de la base de datos sin tener que previsualizarla en la página web. Para integrar esta funcionalidad, debemos cargar el contenido de forma dinámica en un div. En este tutorial te mostraremos cómo cargar contenido de la BD en un div oculto e imprimirlo utilizando Javascript, jQuery, PHP y MySQL.

Para mostrar todo esto, implementaremos estos pasos:

• Mostrar un desplegable con unos cuantos usuarios
• Cargar la información del usuario designado por el usuario
• Imprimir la información sin tener que mostrarla por pantalla

Crear tabla de la base de datos

Para almacenar la información de nuestros usuarios tendremos que crear la tabla. El siguiente SQL crea una tabla llamada users con unos cuantos campos muy basiquitos.

CREATE TABLE `users` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `phone` varchar(15) COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 `status` enum('Active','Inactive') COLLATE utf8_unicode_ci NOT NULL DEFAULT 'Active',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

 

Configuracion de la base de datos (dbConfig.php)

Utilizaremos el fichero dbConfig.php para conectarnos a nuestra base de datos.

<?php
// Database configuration
$dbHost     = "localhost";
$dbUsername = "root";
$dbPassword = "root";
$dbName     = "noprog";

// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}

 

Imprimir contenido dinámico (index.php)

HTML y PHP

Inicialmente, extraeremos los usuarios de la base de datos y los listaremos en un desplegable. Para imprimir los datos del usuario en el div, primero el usuario tendrá que seleccionarlo del desplegable.

<?php
// Include the database configuration file
require_once 'dbConfig.php';

// Fetch the users from the database
$result = $db->query("SELECT id, name FROM users");
?>

<!-- Dropdown to select the user -->
<select id="userSelect">
    <option value="">Select User</option>
    <?php while($row = $result->fetch_assoc()){ ?>
    <option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
    <?php } ?>
</select>

<!-- Print button -->
<button id="getUser">Print Details</button>

<!-- Hidden div to load the dynamic content -->
<div id="userInfo" style="display: none;"></div>

 

Javascript

Incluye la librería jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

El siguiente código carga el contenido dinámico del lado del servidor e imprime el contenido del div con el método window print().

<script>
$(document).ready(function(){
    $('#getUser').on('click',function(){
        var userID = $('#userSelect').val();
        $('#userInfo').load('getData.php?id='+userID,function(){
            var printContent = document.getElementById('userInfo');
            var WinPrint = window.open('', '', 'width=900,height=650');
            WinPrint.document.write(printContent.innerHTML);
            WinPrint.document.close();
            WinPrint.focus();
            WinPrint.print();
            WinPrint.close();
        });
    });
});
</script>

 

Cargar contenido dinámico (getData.php)

El fichero getData.php es llamada por el método load() de AJAX para recuperar la información del usuario de la base de datos utilizando PHP y MySQL.

<?php
$userData = array();
if(!empty($_GET['id'])){
    // Include the database configuration file
    require_once 'dbConfig.php';
    
    // Get the user's ID from the URL
    $userID = $_GET['id'];
    
    // Fetch the user data based on the ID
    $query = $db->query("SELECT * FROM users WHERE id = ".$userID);
    
    if($query->num_rows > 0){
        $userData = $query->fetch_assoc();
    }
}
?>

<!-- Render the user details -->
<div class="container">
    <h2>User Details</h2>
    <?php if(!empty($userData)){ ?>
        <p><b>Name:</b> <?php echo $userData['name']; ?></p>
        <p><b>Email:</b> <?php echo $userData['email']; ?></p>
        <p><b>Phone:</b> <?php echo $userData['phone']; ?></p>
        <p><b>Created:</b> <?php echo $userData['created']; ?></p>
        <p><b>Status:</b> <?php echo $userData['status']; ?></p>
    <?php }else{ ?>
        <p>User not found...</p>
    <?php } ?>
</div>