0

Tengo este codigo que sirve para imprimir el outerHTML de un div, Proceso de ejecucion:

  1. detecto click en un elemento con atributo bt-print
  2. selecciono el div con atributo area-print basado en el bt-print
  3. creo, abro una ventana y le doy como html el outerHtml de mi div area-print
  4. al imprimir o cerrar la ventana de dialogo print cierro esta ventana

document.querySelector('[bt-print]').addEventListener("click",function(){
  alert(1);
var divToPrint=document.querySelector('[area-print="'+this.getAttribute('bt-print')+'"]');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.outerHTML+'</body></html>');
newWin.document.close();
});
<div area-print="hola">hola</div>
<div area-print="chau">chau</div>

<button bt-print="hola">Hola</button>
<button bt-print="chau">Chau</button>

Funciona bien con el primer bt-print, los demas no los detecta, puse el alert para ver si ejecuta almenos la funcion y nada mi pregunta es: como puedo seleccionar todos los elementos que contengan bt-print como atributo

Nota: intente con querySelectorAll pero es peor, no detecta ni el primer boton

Otra forma de preguntar seria: lo que deseo es obtener el mismo resultado que obtendria poniendo en jquery esto: $("[bt-print]").on("click",function(){ ... });

12
  • querySelector te devuelve un htmlCollection, tendrás que recorrerlo, no te aparece algo en la consola?
    – Christian
    el 15 abr. 2021 a las 14:07
  • Puedes usar un getElementById, debe devolverte un array de esos selectors y te da error porque no específica cuál vas a usar.
    – gaidyjg
    el 15 abr. 2021 a las 14:08
  • ¿Puedes explicar lo que quieres hacer, sobre todo aquí: var divToPrint=document.querySelector('[area-print="'+this.getAttribute('bt-print')+'"]'); ¿? Tu código es altamento sospechoso de una mala práctica o de un error de lógica.
    – A. Cedano
    el 15 abr. 2021 a las 14:13
  • @A.Cedano sirve para imprimir el outerhtml de un div
    – IntruzO
    el 15 abr. 2021 a las 14:18
  • Entiendo, pero si de entrada explicas lo que quieres hacer podemos decirte que hay maneras más simples de hacer este tipo de cosas. No puedes vivir esclavo de un código, cuando ese código tiene una mala práctica o errores de lógica arrastras con él sín necesidad cuando puedes mejorar/optimizar. Lo digo porque veo muchas preguntas como la tuya donde te lanzan el código sin más, sin explicar nada pensando que tiene que ser con ese código obligatoriamente.
    – A. Cedano
    el 15 abr. 2021 a las 14:21

3 respuestas 3

2

La respuesta de @anythingg explica muy bien cómo y porqué usar querySelectorAll() y, basado en su código, solo te propongo algunos cambios:

  1. Usar atributos de datos en lugar de crear tus propios atributos de forma arbitraria. Todos los navegadores recientes dan soporte a esta característica
  2. En la medida de lo posible, evita concatenaciones y crea las cadenas con plantillas de texto para mayor legibilidad y facilidad al crear contenidos
  3. No es recomendable asignar eventos dentro de etiquetas, en lugar de tener <body onload="window.print()"> usa el comando sobre la ventana creada

Desconozco si hay mejores formas de imprimir con un solo clic el contenedor deseado; las pocas veces que he necesitado imprimir, creo una ventana modal mostrando el contenido dentro de un iframe y el botón correspondiente, pero supongo que no es lo que buscas, porque se requiere que el usuario haga un clic adicional

// Seleccionar por atributo de datos
document.querySelectorAll('[data-button]').forEach(btn => {
    btn.addEventListener('click', function() {
        // Obtener contenido de atributo de datos con elemento.dataset.nombreAtributo
        let divToPrint = document.querySelector(`[data-print='${btn.dataset.button}']`);
        let newWin = window.open('', 'Print-Window');
        newWin.document.write(`
            <html>
              <body>
                  ${divToPrint.outerHTML}
              </body>
            </html>
        `);
        // Imprimir con el comando print() en lugar de usar evento en etiqueta
        newWin.print();
        newWin.close();
    });
});
<div data-print="hola">hola</div>
<div data-print="chau">chau</div>

<button data-button="hola">Hola</button>
<button data-button="chau">Chau</button>

Importante: El fragmento de código no abre una ventana nueva y es por las restricciones que pone SO para evitar acciones que pueden suponer algún riesgo para otros usuarios (spam, rastreo, etc.)

1

querySelector solo te devuelve el primer elemento con el selector, si quieres obtener todos los elementos, usa querySelectorAll, el cual te da un NodeList que puedes recorrer con Array.prototype.forEach

document.querySelectorAll('[bt-print]').forEach(el => {
  el.addEventListener("click",function(){
    alert(1);
    var divToPrint=document.querySelector('[area-print="'+el.getAttribute('bt-print')+'"]');
    var newWin=open('','Print-Window');
    newWin.document.open();
    newWin.document.write('<html><body onload="window.print()">'+divToPrint.outerHTML+'</body></html>');
    newWin.document.close();
  });
});
<div area-print="hola">hola</div>
<div area-print="chau">chau</div>

<button bt-print="hola">Hola</button>
<button bt-print="chau">Chau</button>

4
  • 1
    Este código da error.
    – A. Cedano
    el 15 abr. 2021 a las 14:13
  • 1
    @A.Cedano Porque se intenta abrir una nueva ventana en un <iframe>, se sobreentiende que esto no se puede y no se puede leer document de la ventana que no se pudo abrir, esto debería funcionar en documentos que no son <iframe> el 15 abr. 2021 a las 14:15
  • 2
    Es que OP debe explicar lo que quiere hacer. Yo sospecho que hay una mala práctica en su código o un error de lógica.
    – A. Cedano
    el 15 abr. 2021 a las 14:16
  • Creo que puede ser una de las restricciones que pone SO en los scripts, al igual que tampoco permite crear cookies o acceder a localStorage.
    – Triby
    el 15 abr. 2021 a las 14:17
1

debes utilizar el document.querySelectorAll para que te devuelva una lista

ejemplo:

for(x of document.querySelectorAll('[bt-print]')){
x.addEventListener("click",function(e){
  alert(1);
var divToPrint=document.querySelector('[area-print="'+this.getAttribute('bt-print')+'"]');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.outerHTML+'</body></html>');
newWin.document.close();
});
}
<div area-print="hola">hola</div>
<div area-print="chau">chau</div>

<button bt-print="hola">Hola</button>
<button bt-print="chau">Chau</button>

Nota: el editor no permite acceder a todas las funcionalidades como puden ser window.open(), locastorage, coockie etc.. por ende va a marcar error .

3
  • Da errores este código.
    – gaidyjg
    el 15 abr. 2021 a las 14:14
  • Este código da error. Sospecho que el origen de problema aquí es una mala práctica. A ver si OP explica lo que quiere hacer, yo no logro encontrar el sentido de este código.
    – A. Cedano
    el 15 abr. 2021 a las 14:15
  • @A.Cedano lo que hace este codigo es obtener el outerhtml de un div y mandarlo a una ventana para que esta ventana se imprima y al momento de cancelar o imprimir se cierre automaticamente, esto lo hago para por ejemplo imprimir un div en especifico sin usar reglas css simplemente imprimir el html del div
    – IntruzO
    el 15 abr. 2021 a las 14:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.