Imprimiendo en ElectronJS

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows, macOS y Linux. Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.

En ciertas aplicaciones de escritorio, a los desarrolladores les gustaría proporcionar una función en la que el usuario pueda descargar o imprimir el contenido desde la aplicación. Por ejemplo, en una aplicación bancaria, al usuario le gustaría imprimir su estado de cuenta que se muestra en la pantalla. Electron, además de guardar el contenido como un archivo PDF, también proporciona una forma en la que podemos imprimir directamente el contenido usando el objeto BrowserWindow y la propiedad webContents . La propiedad webContents nos proporciona ciertos eventos de instancia y métodos mediante los cuales podemos imprimir el contenido de BrowserWindowInstancia que se muestra, imprima el contenido de una URL remota o imprima un archivo desde el sistema local. Este tutorial demostrará cómo imprimir contenido en Electron.

Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.

• Estructura del proyecto:
  

Ejemplo: Comenzaremos construyendo la aplicación electrónica básica siguiendo los pasos dados.

• Paso 1: navegue a un directorio vacío para configurar el proyecto y ejecute el siguiente comando,

  npm init

  Para generar el archivo package.json . Instale Electron usando npm si no está instalado.

  npm install electron --save

  Este comando también creará el archivo package-lock.json e instalará las dependencias requeridas de node_modules . Cree la carpeta de activos según la estructura del proyecto.
  paquete.json:

  {
    "name": "electron-print",
    "version": "1.0.0",
    "description": "Print Files in Electron ",
    "main": "main.js",
    "scripts": {
      "start": "electron ."
    },
    "keywords": [
      "electron"
    ],
    "author": "Radhesh Khanna",
    "license": "ISC",
    "dependencies": {
      "electron": "^8.2.5"
    }
  }
  

• Paso 2: Cree un archivo main.js de acuerdo con la estructura del proyecto. Este archivo es el Proceso Principal y actúa como un punto de entrada a la aplicación. Copie el código Boilerplate para el archivo main.js como se indica en el siguiente enlace . Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto.

  principal.js:

  const { app, BrowserWindow } = require('electron')    function createWindow() {   // Create the browser window.   const win = new BrowserWindow({     width: 800,     height: 600,     webPreferences: {       nodeIntegration: true     }   })      // Load the index.html of the app.   win.loadFile('src/index.html')      // Open the DevTools.   win.webContents.openDevTools() }    // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. // This method is equivalent to 'app.on('ready', function())' app.whenReady().then(createWindow)    // Quit when all windows are closed. app.on('window-all-closed',() => {   // On macOS it is common for applications and their menu bar   // to stay active until the user quits explicitly with Cmd + Q   if (process.platform !== 'darwin') {     app.quit()   } })    app.on('activate',() => {     // On macOS it's common to re-create a window in the      // app when the dock icon is clicked and there are no      // other windows open.   if (BrowserWindow.getAllWindows().length === 0) {     createWindow()   } })    // In this file, you can include the rest of your  // app's specific main process code. You can also  // put them in separate files and require them here.

• Paso 3: Cree el archivo index.html y el archivo index.js dentro del directorio src . También copiaremos el código repetitivo para el archivo index.html del enlace mencionado anteriormente. Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto.

  índice.html:

  <!DOCTYPE html> <html>   <head>     <meta charset="UTF-8">     <title>Hello World!</title>     <!-- https://electronjs.org/docs/tutorial                            /security#csp-meta-tag -->     <meta http-equiv="Content-Security-Policy"            content="script-src 'self' 'unsafe-inline';" />   </head>   <body>     <h1>Hello World!</h1>     We are using node      <script>         document.write(process.versions.node)     </script>, Chrome      <script>         document.write(process.versions.chrome)     </script>, and Electron      <script>         document.write(process.versions.electron)     </script>.        <!-- Adding Individual Renderer Process JS File -->     <script src="index.js"></script>   </body> </html>

• Salida: en este punto, nuestra aplicación electrónica básica está configurada. Para iniciar la aplicación Electron, ejecute el comando:

  npm start

  

Impresión en Electron: la instancia de BrowserWindow y la propiedad webContents son parte del proceso principal . Para importar y usar BrowserWindow en el proceso Renderer , usaremos el módulo remoto Electron . Para obtener más detalles sobre el módulo remoto, consulte este enlace .

• Enfoque 1: imprima el contenido de la instancia activa actual de BrowserWindow .

  El método webContents.print(options, callback) imprime el contenido de BrowserWindow con la configuración de impresión de vista previa de Chromium. Este método implementa una función de devolución de llamada . Toma los siguientes parámetros. Para obtener información más detallada sobre el método webContents.print() , consulte este enlace .

  • opciones: Objeto (Opcional) Toma los siguientes parámetros,
    • silencioso: booleano (opcional) Si este valor se establece en verdadero , la aplicación no solicitará al usuario los ajustes y configuraciones de la impresora. Tomará los valores establecidos en el objeto o la configuración predeterminada de la impresora. El valor predeterminado es falso .
    • printBackground: Boolean (Opcional) Toma el Color de fondo y la Imagen de la página web, si corresponde. El valor predeterminado es falso .
    • deviceName: string (opcional) Establezca el nombre del dispositivo de impresora que se utilizará. Debe ser el nombre definido por el sistema reconocido por los controladores de impresora.
    • color: booleano (opcional) Establece si la página impresa estará en color o en escala de grises . El valor predeterminado es verdadero .
    • horizontal: booleano (opcional) Define el modo de la página impresa. Este valor define si la página web debe imprimirse en modo horizontal . El valor predeterminado es falso, lo que significa modo de retrato .
    • scaleFactor: Integer (Opcional) El factor de escala de la página web. Este valor no debe cambiarse hasta que sea necesario.
    • pagesPerSheet: Integer (Opcional) El número de páginas web que deben imprimirse por página real. Las páginas web serán visibles como diapositivas en la página impresa real.
    • intercalar: booleano (opcional) Define si la página debe intercalarse. El valor predeterminado es falso . Intercalar se refiere a la organización de páginas web en una secuencia predeterminada. Intercalar crea conjuntos coherentes y lógicos a partir de múltiples partes diferentes. Por ejemplo, Organizar las páginas en orden secuencial de numeración de páginas.
    • copias: Entero (opcional) El número de copias del conjunto de documentos que deben imprimirse.
    • duplexMode: string (opcional) Configure el modo dúplex de la página web impresa. Los valores pueden ser simplex , shortEdge o longEdge . shortEdge define que pasas la página desde el ancho del papel, como en los blocs de notas tradicionales.
    • header: String (Opcional) El encabezado personalizado en la copia impresa de la página web.
    • footer: String (Opcional) El pie de página personalizado en la copia impresa de la página web.
    • dpi: Objeto (Opcional) Significa Puntos por pulgada . Es una medida de la densidad de una página impresa. Toma los siguientes parámetros,
      • horizontal: Entero (Opcional) El dpi horizontal.
      • vertical: Entero (Opcional) El dpi vertical.
    • margins: Objeto (Opcional) Toma los siguientes parámetros,
      • marginType: String (Opcional) Los valores pueden ser default , none , printableArea o custom . Si se elige personalizado . También necesitamos definir los siguientes valores,
      • top: Integer (Opcional) El margen superior definido en píxeles .
      • left: Integer (Opcional) El margen izquierdo definido en píxeles .
      • bottom: Integer (Opcional) El margen inferior definido en píxeles .
      • right: Integer (Opcional) El margen derecho definido en píxeles .

      Todos estos valores son parte de un solo objeto.

  Cuando la propiedad silent se establece en true , Electron elegirá la impresora predeterminada del sistema si la propiedad deviceName no está definida y la configuración predeterminada del sistema para imprimir. Si la propiedad silenciosa se establece en falso , Electron abrirá un cuadro de diálogo que muestra todas las configuraciones predeterminadas de la impresora del sistema. Todos los demás valores definidos en el objeto se pueden ajustar y cambiar desde ese cuadro de diálogo personalizado.
  Nota: Para obligar a este método a imprimir en una nueva página, utilice page-break-before: always; propiedad en CSS. Hay algunos errores asociados con el silencio.propiedad en algunos entornos de sistema según la última versión de Electron. Provoca algunos problemas al imprimir diferentes archivos, como archivos PDF, cuando la propiedad silenciosa se establece en true .

• devolución de llamada: función (Opcional) Consta de dos valores,
  • éxito: Booleano Indica si la llamada de impresión fue exitosa o no.
  • failReason: String Descripción del error si la llamada de impresión no tuvo éxito.

Para obtener la instancia actual de BrowserWindow en el proceso Renderer , podemos usar algunos de los métodos estáticos proporcionados por el objeto BrowserWindow .

• BrowserWindow.getAllWindows(): este método devuelve una array de instancias de BrowserWindow activas/abiertas . En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente desde la array como se muestra en el código.
• BrowserWindow.getFocusedWindow(): este método devuelve la instancia de BrowserWindow que está enfocada en la aplicación. Si no se encuentra ninguna instancia de BrowserWindow actual , devuelve nulo . En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente mediante este método, como se muestra en el código.

index.html : agregue el siguiente fragmento en ese archivo.

<br><br>
   <button id="current">
    Print Current Content of Page
   </button>

index.js : agregue el siguiente fragmento en ese archivo.

const electron = require('electron')
// Importing BrowserWindow from Main
const BrowserWindow = electron.remote.BrowserWindow;
  
var current = document.getElementById('current'); 
var options = {
    silent: false,
    printBackground: true,
    color: false,
    margin: {
        marginType: 'printableArea'
    },
    landscape: false,
    pagesPerSheet: 1,
    collate: false,
    copies: 1,
    header: 'Header of the Page',
    footer: 'Footer of the Page'
}
  
current.addEventListener('click', (event) => {
    let win = BrowserWindow.getFocusedWindow();
    // let win = BrowserWindow.getAllWindows()[0];
  
    win.webContents.print(options, (success, failureReason) => {
        if (!success) console.log(failureReason);
  
        console.log('Print Initiated');
    });
});

Salida:

Página imprimible: