Как распечатать диалоговое окно потока Vaadin?

#javascript #java #vaadin #vaadin-flow

Вопрос:

У меня много диалогов в потоке vaadin, которые я хочу, чтобы пользователь мог их распечатать. Я знаю, как распечатать всю страницу, как показано ниже, но я хочу, чтобы был напечатан только диалог над страницей.

 Button btnPrint = new Button( "Print…" );  btnPrint .addClickListener( ( ClickEvent < Button > clickEvent ) ->  {  // this Prints the current page  UI.getCurrent().getPage().executeJs( "print();" );  } );

Я также попытался сделать это с помощью java-скрипта, но безуспешно.

 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();

}

Есть идеи, как это сделать?

1. Как насчет того, чтобы сделать окно в полный размер страницы для печати и изменить его размер впоследствии?

2. Что вы подразумеваете под заполнением и изменением размера? Вы имеете dialog.setSizeFull(); в виду, и после печати снова измените его размер?

3. Да, что-то в этом роде?

4. @aliakbarshahriariGaraei Не получил ответа на мой ответ. Это сработало для вас?

5. @Оливер, это еще не работает, есть проблема с scrolbar.

Ответ №1:

Оба vaadin-dialog и vaadin-dialog-overlay являются пользовательскими элементами и используют Shadow DOM. Одной из основных функций теневого DOM является маскировка исходного DOM (называемого «Светлым DOM») новым DOM (называемым «Теневым DOM»). Таким образом, без какого-либо веб-отражения вызов innerHTML не возвращает то, что вы ожидали. Кроме того, если бы это сработало, вы бы использовали outerHTML .

Одним из решений является использование CSS…

Определите новый стиль:

 .no-print {  display: none !important; }

И когда вы захотите распечатать, добавьте этот класс ко всем элементам, кроме vaadin-dialog и 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' amp;amp; 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');"    "}" );

Очевидно, что это не самый эффективный метод. Особенно потому, что другие элементы, такие как script s, получат no-print класс. Но, надеюсь, это даст вам представление.

Я надеюсь, что это помогло!