Открытие нового окна javascript и загрузка css печати
Я хочу использовать новое окно для печати части HTML.
var cssLink = document.getElementByTagName('link')[2];
var prtContent = document.getElementById('print_body');
var WinPrint = window.open('','','left=0,top=0,width=1000,height=auto,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.getElementsByTagName('head')[0].appendChild(link);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
Но иногда, когда WinPrint собирается выполнить системную печать, файл CSS все еще не загружен.
Как я мог это исправить?
Я думаю, вам как-то нужно предварительно загрузить файл css или, по крайней мере, прослушать событие загрузки в новом окне, вы пытались вызвать метод печати внутри функции WinPrint.onload? Если это не сработает, вам может потребоваться запросить содержимое этого файла css в виде простого текстового формата в вызове ajax и ввести его прямо в DOM нового окна внутри тега стиля.
этот код запускается при нажатии кнопки печати
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Похоже, иногда браузер не загружает файл CSS вовремя для печати. Вы можете запустить свой код печати только после загрузки файла css, например:
var cssElement = document.getElementsByTagName('link')[2].cloneNode();
var prtContent = document.getElementById('print_body');
var WinPrint = window.open('','','left=0,top=0,width=1000,height=auto,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
cssElement.addEventListener('load', function () {
WinPrint.focus();
WinPrint.print();
});
WinPrint.document.head.appendChild(cssElement);
Это не сработает на Edge. WinPrint.document.head.appendChild (cssElement) вызовет ошибку
Я думаю, это сработает для вас.
var cssLink = document.getElementByTagName('link')[2];
var prtContent = document.getElementById('print_body');
// open _blank page view before printing
var WinPrint = window.open('','_blank','left=0,top=0,width=1000,height=auto,toolbar=0,scrollbars=0,status=0');
// add new line code here
WinPrint.document.open();
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.getElementsByTagName('head')[0].appendChild(link);
WinPrint.document.close();
// remove WinPrint.focus() and WinPrint.print() because it will call print machine of system
Итак, если вы хотите отображать css для печати. Ты можешь попробовать.
@media print {
your css here
}
Подробнее здесь: https://www.w3.org/Amaya/User/doc/Printing.html
Я использовал этот метод раньше, но я не совсем уверен, что мой print_body внутри модального окна, когда я печатаю css, работал неправильно.
когда срабатывает этот код? по щелчку? или просто как загружает страницу? где размещен этот код?