[英]How to print html contents of a div with color styles and images using plain javascript and no jquery
I have for 2 years been using jQuery printArea() library whenever I needed to print a section in my html web page, but now I have a use case where I want to achieve the same with only javascript. 我在网上尝试了很多解决方案,但都没有包括我的颜色 styles 和图像。
这是我到目前为止所尝试的。
<html>
<head>
<style>
#dvContainer {
background-color: yellow;
}
@media print {
body * {
visibility: hidden; // part to hide at the time of print
-webkit-print-color-adjust: exact !important; // not necessary use if colors not visible
}
#dvContainer {
background-color: blue !important;
}
}
</style>
</head>
<body>
<div id="dvContainer">
This content needs to be printed.
<div style="background:limegreen; border:1px solid blue; padding:30px; margin:4%; ">
Testing the styles inside printed div
<img src="my-photo.png" width="60px"/>
</div>
</div>
<hr/>
<button id="printNow" onclick="divPrinting();" > Print now </button>
<hr/>
<script type="text/javascript">
function addStyling(){
document.style.background = "skyblue";
}
function divPrinting(){
var divContents = document.querySelector("#dvContainer").innerHTML;
var printWindow = window.open('', '', 'left=40,top=40,height=500,width=900');
printWindow.document.write('<html>');
printWindow.document.write('<head> <title> document-printed-by-javascript </title> </head>');
printWindow.document.write('<body>');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
//printWindow.document.print();
//printWindow.document.close();
//printWindow.focus();
printWindow.print();
printWindow.close();
}
</script>
</body>
</html>
<html>
<head>
<style>
#dvContainer {
background-color: yellow;
}
@media print {
body * {
visibility: hidden; // part to hide at the time of print
-webkit-print-color-adjust: exact !important; // not necessary use if colors not visible
}
#dvContainer {
background-color: blue !important;
}
}
</style>
</head>
<body>
<div id="dvContainer">
This content needs to be printed.
<div style="background:limegreen; border:1px solid blue; padding:30px; margin:4%; ">
Testing the styles inside printed div
<img src="my-photo.png" width="60px"/>
</div>
</div>
<hr/>
<button id="printNow" onclick="divPrinting();" > Print now </button>
<hr/>
<script type="text/javascript">
function addStyling(){
document.style.background = "skyblue";
}
function divPrinting(){
var divContents = document.getElementById("dvContainer").innerHTML;
var a = window.open('', '', 'left=40','top=40','height=500', 'width=500');
a.document.write('<html>');
a.document.write('<head> <title> document-printed-by-javascript </title> </head>');
a.document.write('<body>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
}
</script>
</body>
</html>
我为 vBulletin 网站制定了以下解决方案。 它将隐藏所有元素(接受正文),添加一个可见的 div,将 HTML 复制到该 div,打印,然后撤消。
CSS
@media print
{
html, body {
margin: 0 !important;
padding: 0 !important;
height: 99%;
page-break-after: avoid;
page-break-before: avoid;
}
.nonPrintableArea { display: none;}
.isaPrintableArea { display: block; }
}
jQuery
$('print-button-selector').on('click', function(e){
//
// get div to print
// 1) get HTML to be printed
var html2print = $('div-selector').html();
// 2) add non print class to hide all elements (accept BODY) from @media print
$('body *').addClass('nonPrintableArea');
// 3) create div to be printed, with HTML to be printed, prepend to BODY
$('body').prepend('<div class="isaPrintableArea">' + html2print + '</div>');
// 4) print
window.print();
// 5 remove printable div
$('.isaPrintableArea').remove();
// remove non print class from all elements
$('body *').removeClass('nonPrintableArea');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.