import {PdfDocument} from "@ironsoftware/ironpdf"; (async () => { // Crear un PDF a partir de una cadena HTML const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>"); // Exportar el PDF a un archivo await pdf.saveAs("output.pdf"); // Ejemplo avanzado con recursos HTML // Cargar activos HTML externos: Imágenes, CSS y JavaScript. const htmlContentWithAssets = "<img src='icons/iron.png'>"; const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets); // Guardar el PDF con los activos cargados await advancedPdf.saveAs("html-with-assets.pdf"); })();

HERRAMIENTAS PDF

Cómo imprimir un archivo PDF en JavaScript

Actualizado 23 de mayo, 2023

1.0 Introducción

El formato de documento portátil (PDF) fue desarrollado por Adobe para compartir documentos con texto y gráficos. Se necesita un programa adicional para abrir un documento PDF en línea. Los archivos PDF son muy importantes para la información crítica en la sociedad actual. Muchas empresas crean documentos y facturas utilizando archivos PDF. Para satisfacer las necesidades de los clientes, los desarrolladores producen documentos PDF. Nunca ha sido tan fácil crear PDF gracias a las bibliotecas modernas.

Para seleccionar la biblioteca ideal para un proyecto que utilice este tipo de bibliotecas, debemos sopesar una serie de factores, como las capacidades de compilación, lectura y conversión.

En este tutorial, repasaremos diversas bibliotecas JavaScript para producir archivos PDF. Analizaremos la biblioteca JS y escenarios de aplicación del mundo real centrándonos en tres puntos principales:

La configuración operativa
Los módulos que facilitan la escritura y las fuentes personalizadas
Facilidad de uso
Después de leer esto, podrá seleccionar la biblioteca PDF ideal para su aplicación JavaScript. Por último, también trataremos IronPDF, una biblioteca PDF útil y eficaz.
Cómo imprimir un archivo PDF en JavaScript
1. Insertar el PDF en una etiqueta iframe
2. Accede a la opción de impresión que viene con el visor PDF del iframe
3. Imprimir el PDF de la página actual mediante JavaScript
4. Invocar el printJS y pasar el ID del elemento a la propiedad imprimible
5. Utilice una biblioteca alternativa para imprimir en .NET C# utilizando la función Imprimir método

2.0 Bibliotecas

Imaginemos que queremos que el cliente pueda descargar e imprimir una copia de nuestra factura. Necesitamos que esta factura se imprima con precisión y de forma adecuada. A continuación, examinaremos algunas de las muchas bibliotecas disponibles para convertir esta factura del formato de archivo HTML a PDF.

2.1 Código JavaScript plano

Normalmente, para imprimir el contenido de un archivo PDF, lo descargamos en nuestro ordenador, lo abrimos y seleccionamos la opción de impresión. JavaScript, por su parte, facilita la impresión de un archivo PDF directamente desde una página web. Todo lo que necesita es un iframe en su sitio web o la capacidad de crear uno dinámicamente, añadir el documento e imprimirlo. Voy a demostrar cómo utilizar JavaScript para imprimir un archivo PDF. Una página web dentro de otra página web se muestra utilizando un iframe. Para que la página web se muestre, el iframe tiene que conocer su fuente.

<html>
<head>
    <title>javascript print pdf</title>
</head>
<body>
    <iframe 
        src="Demo.pdf" id="myFrame" 
            frameborder="0" style="border:0;" 
                width="300" height="300">
    </iframe>
    <p>
        <input type="button" id="bt" onclick="print()" value="Print PDF" />
    </p>
</body>

<script>
    let print = () => {
        let objFra = document.getElementById('myFrame');
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
</script>
</html>

<html>
<head>
    <title>javascript print pdf</title>
</head>
<body>
    <iframe 
        src="Demo.pdf" id="myFrame" 
            frameborder="0" style="border:0;" 
                width="300" height="300">
    </iframe>
    <p>
        <input type="button" id="bt" onclick="print()" value="Print PDF" />
    </p>
</body>

<script>
    let print = () => {
        let objFra = document.getElementById('myFrame');
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
</script>
</html>

HTML

En cuanto a la impresión de PDF, el contenido de un documento puede mostrarse mediante un iframe y, a continuación, imprimirse mediante JavaScript. En ambas situaciones, se requiere un iframe. En el ejemplo anterior, hay un iframe con una fuente (el PDF). También hay un elemento de entrada de tipo botón.

La propiedad onclick del botón invocará al método print.

Cómo imprimir un archivo PDF en JavaScript: Figura 1 - Impresión

2.2 Imprimir.js

Print.js se creó principalmente para permitirnos imprimir archivos PDF desde dentro de nuestras aplicaciones sin tener que desplazarnos, importarlos e imprimirlos desde la interfaz de usuario, o utilizar incrustaciones. Esto es para circunstancias especiales en las que los usuarios sólo necesitan imprimir los archivos PDF y no necesitan abrirlos o descargarlos.

Esto puede ser útil, por ejemplo, cuando los usuarios piden imprimir informes generados en el servidor. Estos informes se le devolverán en formato PDF. Estos archivos pueden imprimirse sin necesidad de abrirlos. Dentro de nuestras aplicaciones, Print.js proporciona una forma cómoda de imprimir estos archivos.

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
        <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
    </head>
    <body>
        <div id="print-area" class="print-main">
            <table>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td>AAA</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>BBB</td>
                    <td>24</td>
                </tr>
            </table>
        </div>
        <button id="btnPrint">Print</button>
        <script>
                $(document).ready(function(){
                    $("#btnPrint").on("click",function(){
                        printJS({
                            printable: 'print-area',
                            type: 'html'});
                    })
                })
        </script>
    </body>
</html>

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
        <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
    </head>
    <body>
        <div id="print-area" class="print-main">
            <table>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td>AAA</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>BBB</td>
                    <td>24</td>
                </tr>
            </table>
        </div>
        <button id="btnPrint">Print</button>
        <script>
                $(document).ready(function(){
                    $("#btnPrint").on("click",function(){
                        printJS({
                            printable: 'print-area',
                            type: 'html'});
                    })
                })
        </script>
    </body>
</html>

HTML

El código anterior se puede utilizar para imprimir archivos PDF directamente desde el sitio web. Muestra que al imprimirlo se imprimirán todas las cadenas HTML disponibles dentro del elemento HTML con el ID llamado "print-area".

Cómo imprimir un archivo PDF en JavaScript: Figura 2 - Impresión de estas cadenas

2.3 IronPDF - La biblioteca PDF de Node.js

IronPDF es una completa biblioteca PDF de Node.js que destaca por su precisión, facilidad de uso y velocidad. Ofrece una amplia gama de funciones para generar, editar y dar formato a PDF directamente desde HTML, URL e imágenes en React. Con soporte para varias plataformas, incluyendo Windows, MacOS, Linux, Docker y plataformas en la nube como Azure y AWS, IronPDF garantiza la compatibilidad entre plataformas. Su sencilla API permite a los desarrolladores integrar rápidamente la generación y manipulación de PDF en sus proyectos Node.js.

Características principales de IronPDF for Node.js:

Generación versátil de PDF: Con IronPDF, los desarrolladores pueden generar PDF a partir de diversas fuentes, como HTML, CSS, JavaScript, imágenes y otros tipos de archivos. Esta flexibilidad permite crear documentos PDF dinámicos y visualmente atractivos adaptados a requisitos específicos.
Personalización avanzada de documentos: IronPDF permite a los desarrolladores mejorar los documentos PDF con funciones como encabezados, pies de página, archivos adjuntos, firmas digitales, marcas de agua y marcadores. Esto permite crear PDF de calidad profesional con contenido enriquecido y elementos interactivos.
Funciones de seguridad: IronPDF ofrece sólidas funciones de seguridad para proteger los PDF de accesos no autorizados. Los desarrolladores pueden implementar medidas de seguridad como contraseñas, firmas digitales, metadatos y otras configuraciones de seguridad para salvaguardar la información confidencial contenida en los documentos PDF.
Rendimiento optimizado: IronPDF está diseñado para un rendimiento óptimo, con soporte completo multihilo y asíncrono. Esto garantiza una generación eficiente de PDF, lo que la hace adecuada para aplicaciones de misión crítica en las que el rendimiento es primordial.
Completo conjunto de funciones: Con más de 50 funciones para crear, dar formato y editar documentos PDF, IronPDF ofrece una solución completa para todas las tareas relacionadas con PDF. Desde la generación básica de documentos hasta la personalización y seguridad avanzadas, IronPDF ofrece una amplia gama de funciones para satisfacer las necesidades de los desarrolladores.
A continuación se muestra un ejemplo de generación y guardado de un documento PDF a partir de Archivo HTML Cadena HTML y URL para conservar el formato para la impresión:

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    await pdfFromUrl.saveAs("website.pdf");

    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    await pdfFromHtmlFile.saveAs("markup.pdf");

    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    await pdfFromUrl.saveAs("website.pdf");

    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    await pdfFromHtmlFile.saveAs("markup.pdf");

    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();

JAVASCRIPT

Para ver más ejemplos de código sobre tareas relacionadas con PDF, visite este enlace ejemplos de código página.

Cómo imprimir un archivo PDF en JavaScript: Figura 3 - IronPDF

3.0 Conclusión

El usuario puede ver el código JavaScript anterior, pero otros podrían abusar de él. El uso del código fuente de esta manera es posible. Además, no es difícil añadir código al sitio web que ponga en peligro la seguridad de los datos enviados a través de él. La mencionada biblioteca JavaScript es vista de forma diferente por los distintos navegadores. Por tanto, el código debe ejecutarse en diversos sistemas antes de su publicación. Dado que algunas funcionalidades nuevas no son compatibles con los navegadores más antiguos, también debemos tener en cuenta la compatibilidad de los navegadores. Las bibliotecas mencionadas anteriormente pueden producir archivos PDF. El usuario también debe estar familiarizado con el script con el que trabaja.

Con el sencillo proceso de integración de IronPDF para frameworks y bibliotecas creadas en JavaScript, se pueden obtener excelentes documentación y ejemplos de código de muestra, y un soporte técnico receptivo, los desarrolladores pueden empezar a trabajar en muy poco tiempo, lo que lo convierte en la mejor opción para generar e imprimir PDF de calidad profesional en aplicaciones relacionadas con Node.js.

IronPDF ofrece un prueba gratuita para que puedas probar todas sus funciones antes de tomar una decisión informada. También está disponible para otros idiomas como C# .NET, Java y Python. Visite el IronPDF para más información. Descargue IronPDF for Node.js desde aquí.

< ANTERIOR
Cómo generar un archivo PDF con JavaScript

SIGUIENTE >
Cómo convertir HTML a PDF en React (Tutorial para desarrolladores)