Spanish [BANano]: Explorando HTML Imprimiendo JavaScript

Mashiane · Oct 17, 2019

Hola

Estoy ocupado explorando cómo puedo imprimir elementos html con BANano para una aplicación en español que estoy creando.

Aquí están los resultados hasta ahora en caso de que necesite algo de esta naturaleza.

1. PrintJS

Con esto, puede cargar los archivos de estilo CSS que necesita usar en la impresión. Mientras que los resultados son buenos. El primer intento generalmente no genera una vista previa.
Puede descargar esto aquí: https://github.com/crabbly/Print.js

Agregue el siguiente código a AppStart

B4X:

BANano.Header.AddCSSFile (`print.css`)
BANano.Header.AddJavascriptFile (`print.js`)

A continuación, debe obtener la identificación del elemento que necesita imprimir. En mi ejemplo, obtengo el id del elemento del BANanoEvent y luego lo paso a PrintJS.

B4X:

Sub onPrint(e As BANanoEvent)
    pkvalue = vue.GetIDFromEvent(e)
    If pkvalue = "" Then Return
    '
    'set print options
    'define the css files being used
    Dim css As List
    css.Initialize2(Array("./styles/roboto.css","./styles/materialfont.css","./styles/vue-material.min.css","./styles/default.css"))
    '
    Dim po As Map = CreateMap()
    po.Put("printable", pkvalue)
    po.Put("type", "html")
    po.Put("showModal", True)
    po.Put("css", css)
    po.put("scanStyles", True)
    po.put("documentTitle","")
    po.Put("targetStyles",Array("*"))
    BANano.RunJavascriptMethod("printJS", Array(po))
End Sub

Puede obtener detalles sobre cómo puede usar PrintJS en el enlace proporcionado anteriormente.

*Translated from English with Google Translate.

Ta!

Mashiane · Oct 17, 2019

2. La segunda opción es JQuery.print. Sin embargo, esto depende de JQuery. Esto está disponible aquí, https://github.com/DoersGuild/jQuery.print

Esto no tiene el problema de tener hickups cuando se activa, sin embargo, he notado que no escala. Por ejemplo, las pantallas más grandes con columnas de 6x2 se tratan como 12x2 en la vista previa de impresión.

Esto se demuestra a continuación.

El elemento html real

Vista previa de impresión generada

Con po.Put (`globalStyles`, True) la lib carga todos los css disponibles y lamentablemente uno solo puede indicar 1 css para cargar manualmente. Con eso, sin embargo, la configuración no se aplica lo suficientemente bien como para identificar la configuración de pantalla más grande.

Como esto necesita JQuery, en AppStart, agregue los siguientes archivos

B4X:

BANano.Header.AddJavascriptFile (`jquery-3.4.1.min.js`)
BANano.Header.AddJavascriptFile (`jQuery.print.min.js`)

Para reproducir la impresión html, ejecute.

B4X:

Sub onPrint(e As BANanoEvent)
    pkvalue = vue.GetIDFromEvent(e)
    If pkvalue = "" Then Return
    '
    Dim po As Map = CreateMap()
    po.Put("globalStyles", True)
    po.Put("mediaPrint", False)
    po.Put("stylesheet", Null)
    po.Put("noPrintSelector", ".no-print")
    po.put("iframe", True)
    po.put("append",Null)
    po.Put("prepend",Null)
    po.Put("manuallyCopyFormValues", True)
    po.Put("timeout", 750)
    po.Put("title", Null)
    po.Put("doctype", "<!doctype html>")
    '
    'initialize jquery
    Dim JQuery As BANanoObject
    JQuery.Initialize("$")
    '
    Dim elKey As String = $"#${pkvalue}"$
    JQuery.Selector(elKey).RunMethod("print", Array(po))
End Sub

With all these issues however, these are quite impressive libraries.

Mashiane · Oct 18, 2019

3. PrintThis

https://jasonday.github.io/printThis/

B4X:

BANano.Header.AddJavascriptFile("jquery-3.4.1.min.js")
BANano.Header.AddJavascriptFile("printThis.js")

Este es mi tercer intento en esta cosa de impresión. Esto parece funcionar de la misma manera que JQuery.Print.js

B4X:

Sub onPrint(e As BANanoEvent)
    pkvalue = vue.GetIDFromEvent(e)
    If pkvalue = "" Then Return
    '
    Dim css As List
    css.Initialize2(Array("roboto.css","materialfont.css","vue-material.min.css","default.css"))
   
    Dim po As Map = CreateMap()
    'po.Put("debug", True)
    po.Put("importCSS", True)
    po.Put("importStyle", False)
    'po.Put("printContainer", True)
    po.put("loadCSS", css)
    'po.put("pageTitle","")
    po.Put("removeInline",False)
    'po.Put("removeInlineSelector", "*")
    'po.Put("printDelay", 333)
    'po.Put("header", Null)
    'po.Put("footer", Null)
    po.Put("base", "./styles/")
    'po.Put("formValues", True)
    'po.Put("canvas", False)
    'po.Put("removeScripts", False)
    'po.Put("copyTagClasses", True)
   
    'initialize jquery
    Dim JQuery As BANanoObject
    JQuery.Initialize("$")
    '
    Dim elKey As String = $"#${pkvalue}"$
    JQuery.Selector(elKey).RunMethod("printThis", Array(po))
End Sub

Mashiane · Oct 18, 2019

Conclusión

Dependiendo de sus necesidades de impresión de elementos HTML, todas estas bibliotecas son potentes. El primero fue capaz de ocuparse de todo mi formato, pero tiene un error de no cargar los archivos CSS inicialmente para que funcione correctamente. Sin embargo, los dos últimos trabajos por primera vez todavía faltan al recoger mi cuadrícula de 6x2. Quizás encuentre una solución pronto.

Lo bueno es que directamente uno puede generar una impresión a partir del elemento HTML de la elección que desee. Sin embargo, la dependencia de JQuery deja menos que desear en los dos últimos porque BANano ya tiene incorporado el Umbrella.

Spanish [BANano]: Explorando HTML Imprimiendo JavaScript

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Similar Threads