Spanish [BANano]: Explorando HTML Imprimiendo JavaScript

Discussion in 'Spanish Forum' started by Mashiane, Oct 17, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    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

    Code:
    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.

    Code:
    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.

    PrintJS.gif


    *Translated from English with Google Translate.

    Ta!
     
    José J. Aguilar likes this.
  2. Mashiane

    Mashiane Expert Licensed User

    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

    6x2.png

    Vista previa de impresión generada

    12x2.png

    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

    Code:
    BANano.Header.AddJavascriptFile (`jquery-3.4.1.min.js`)
    BANano.Header.AddJavascriptFile (`jQuery.print.min.js`)
    Para reproducir la impresión html, ejecute.

    Code:
    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.
     
    José J. Aguilar likes this.
  3. Mashiane

    Mashiane Expert Licensed User

    3. PrintThis

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

    Code:
    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

    Code:
    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
     
  4. Mashiane

    Mashiane Expert Licensed User

    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.
     
    Descartex likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice