Я пытаюсь заставить эту функцию работать на веб-сайте проекта, над которым я работаю. Цель этой функции - только (физически) распечатать содержимое дочернего div, который по совпадению называется селектором #content.
Вот немного, что у меня есть до сих пор:
<script>
function printContent() {
window.open().document.write($("#content").html());
window.print();
window.close();
}
</script>
Функция запускается, когда пользователь нажимает на гиперссылку "печать". В новом окне будет загружено содержимое div #content, которое анализируется из другого документа HTML:
<div id="content">
<br/>
<div id="Algemeen">
<h3>Algemene informatie</h3>
<fieldset id="profile">
<img id="male" src="./images/Pixers/male_icon.jpg"></img>
<img id="female" src="./images/Pixers/female_icon1.jpg"></img>
</fieldset>
</div>
<div id ="leftbox">
<div id ="veldbox"><label>BSN:</label>$!person.bsn</div>
<div id ="veldbox"><label>Voornaam: </label>$!person.first_name</div>
<div id ="veldbox"><label>Achternaam:</label>$!person.name_prefix $!person.last_name</div>
<div id ="veldbox"><label>Geslacht:</label>$!person.gender</div>
<div id ="veldbox"><label>Woonadres:</label>$!person.address</div>
<div id ="veldbox"><label>Plaatsnaam:</label>$!person.location</div>
<div id ="veldbox"><label>Provincie:</label>$!person.province</div>
<div id ="veldbox"><label>Postcode:</label>$!person.zipcode</div>
<div id ="veldbox"><label>Tel. nummer thuis:</label>$!person.h_number</div>
<div id ="veldbox"><label>Mobiel nummer:</label>$!person.mobile_nr</div>
<div id ="veldbox"><label>Burgerlijke Stand:</label>$!person.m_status</div>
<div id ="veldbox"><label>land van herkomst:</label>$!person.origin</div>
</div>
<div id="rightbox">
<div id ="veldbox"><label>Naam instantie:</label></div>
<div id ="veldbox"><label>Adres instantie:</label></div>
<div id ="veldbox"><label>Postcode instantie:</label></div>
<div id ="veldbox"><label>Tel. instantie:</label></div>
<div id ="veldbox"><label>Fax instantie:</label></div>
<div id ="veldbox"><label>E-mail instantie:</label></div>
<div id ="veldbox"><label>Website instantie:</label></div>
<div id ="veldbox"><label>-:</label></div>
<div id ="veldbox"><label>-:</label></div>
<div id ="veldbox"><label>-:</label></div>
</div>
</div>
Он просто не будет загружать стиль вместе с ним. Все содержимое будет отображаться только в левом верхнем углу. Я попытался связать CSS с помощью JS или просто поместив его в начало страницы, как это было предложено на другой странице. Конечно, я мог бы сделать это неправильно. Я еще не пытался понять это с помощью JQuery, поэтому, если у вас есть какие-либо другие решения, которые могут помочь мне с моей проблемой, я счастлив и открыт, чтобы получить некоторые советы о них.
Спасибо заранее!
Создайте полную HTML-страницу в открывшемся окне и укажите там свой CSS файл:
var win = window.open('','printwindow');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
win.document.write($("#content").html());
win.document.write('</body></html>');
win.print();
win.close();
Я делаю что-то похожее на приведенный выше пример, но обнаружил, что он не работает во всех браузерах. Следующее было протестировано со всеми основными браузерами и работает для меня. (Помните, что некоторые стили могут зависеть от родительских элементов, поэтому, если ваш div вложен внутри этих элементов, стили могут выглядеть не так точно в окне печати, как на родительской странице).
function printWithCss() {
//Works with Chome, Firefox, IE, Safari
//Get the HTML of div
var title = document.title;
var divElements = document.getElementById('printme').innerHTML;
var printWindow = window.open("", "_blank", "");
//open the window
printWindow.document.open();
//write the html to the new window, link to css file
printWindow.document.write('<html><head><title>' + title + '</title><link rel="stylesheet" type="text/css" href="/Css/site-print.css"></head><body>');
printWindow.document.write(divElements);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.focus();
//The Timeout is ONLY to make Safari work, but it still works with FF, IE & Chrome.
setTimeout(function() {
printWindow.print();
printWindow.close();
}, 100);
}
Я хотел иметь все стили с родительской страницы и напечатать. Поэтому я хотел использовать все ссылки css в HEAD.
В моем решении используется jQuery.
(function print() {
// getting the tag element I want to print
// cloning the content so it doesn't get messed
// remove all the possible scripts that could be embed
var printContents = $('body').clone().find('script').remove().end().html();
// get all <links> and remove all the <script> from the header that could run on the new window
var allLinks = $('head').clone().find('script').remove().end().html();
// open a new window
var popupWin = window.open('', '_blank');
// ready for writing
popupWin.document.open();
// -webkit-print-color-adjust to keep colors for the printing version
var keepColors = '<style>body {-webkit-print-color-adjust: exact !important; }</style>';
// writing
// onload="window.print()" to print straigthaway
popupWin.document.write('<html><head>' + keepColors + allLinks + '</head><body onload="window.print()">' + printContents + '</body></html>');
// close for writing
popupWin.document.close();
})();
У меня также возникла проблема с загрузкой CSS после рендеринга страницы, поэтому решение заключалось в том, чтобы прочитать содержимое файла css и записать его в новый документ:
var w = window.open();
jQuery.get('/styles.css', function (data) {
w.document.write('<html><head><style>');
w.document.write(data);
w.document.write('</style></head><body>');
w.document.write($('.print-content').html());
w.document.write('</body></html>');
w.print();
w.close();
});
У меня была такая же проблема. Я нахожу, что это печать до того, как css успевает отобразить на странице. То, что я сделал, чтобы найти это, это сделать setTimeout в вызове печати, и все стили были затем показаны в печатном документе. Если я не сделал таймаут, я обнаружил, что стиль не был выбран в вызове печати.