Tengo muchos diálogos en el flujo de vaadin que quiero que el usuario los imprima. Sé cómo imprimir toda la página como se muestra a continuación, pero solo quiero que se imprima el cuadro de diálogo que se encuentra sobre la página.
Button btnPrint = new Button( "Print…" ); btnPrint .addClickListener( ( ClickEvent < Button > clickEvent ) -> { // this Prints the current page UI.getCurrent().getPage().executeJs( "print();" ); } );También probé esto con java script pero sin éxito.
window.printPartOfPage = function (divPrintId) { console.log("Inside printPartOfPage"); var printContent = document.getElementById(divPrintId); var WinPrint = window.open('', '', 'letf=100,top=100,width=600,height=600'); WinPrint.document.write(printContent.innerHTML); WinPrint.document.close(); WinPrint.focus(); WinPrint.print(); WinPrint.close();}
¿Alguna idea de cómo hacerlo?
Tanto vaadin-dialog como vaadin-dialog-overlay son elementos personalizados y usan Shadow DOM. Una de las características principales de un Shadow DOM es enmascarar el DOM inicial (llamado "Light DOM") con un nuevo DOM (llamado "Shadow DOM"). Por lo tanto, sin algún tipo de reflejo web, una llamada a innerHTML no devuelve lo que esperaba. Además, si funcionara, habrías usado outerHTML .
Una solución es usar CSS...
Definir un nuevo estilo:
.no-print { display: none !important; } Y cuando desee imprimir, agregue esa clase a todos los elementos excepto vaadin-dialog y vaadin-dialog-overlay :
UI.getCurrent().getPage().executeJs("" + "const body = document.body;" + "" + "for(let child = body.firstChild; child !== null; child = child.nextSibling) {" + " if(child.tagName !== 'vaadin-dialog' && child.id !== 'overlay') {" + " child.classList.add('no-print');" + " }" + " " + "}" + "" + "window.print();" + "" + "for(let child = body.firstChild; child !== null; child = child.nextSibling) {" + " child.classList.remove('no-print');" + "}" ); Obviamente, este no es el método más eficiente. Particularmente porque otros elementos, como script , obtendrán la clase no-print . Pero espero que esto te dé una idea.
¡Espero que esto haya ayudado!