使用Javascript打印支持CSS的网页 [英] Print web page with CSS support using Javascript
问题描述
嗨
专家，
我在打印网页时遇到一个问题。我正在使用以下功能打印文件
Hi
Expert,
I have one problem during printing a web page. I am using following function to print document
function printCrossword(printContainer) {
var DocumentContainer = getElement(printContainer);
var WindowObject = window.open('', "PrintWindow", "width=5,height=5,top=200,left=200,toolbars=no,scrollbars=no,status=no,resizable=no");
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
问题：在打印页面中，我为每个元素分配了类，它在预览期间看起来不错，但打印模式会跳过一些边框，背景颜色和字体。
请告诉我，如何打印文档预览模式相同。
您的答案将不胜感激！：玫瑰：
Imdadhusen
Problem: In the printing page i have assign class to each elements and it''s looking good during preview, but print mode it will skipping some borders, background color and fonts.
Please do let me know, how i can print a document with same looking in preview mode.
Your answer will be appreciated!:rose:
Imdadhusen
推荐答案
在javascript中使用内联CSS。
Use Inline CSS in javascript.
function PrintPage()
{
var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=900,height=300,left=100,top=25";
var sWinHTML = document.getElementById('divPrint').innerHTML;
var winprint=window.open("","",sOption);
winprint.document.open();
winprint.document.write('<html><head><style type="text/css">');
winprint.document.write('body,td,th{font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#000000}');
winprint.document.write('.style1 {font-size:11px; font-weight:bold; color:#000000; }');
winprint.document.write('.style2 {font-size:11px; font-weight:bold; color:#FFFFFF; }');
winprint.document.write('</style></head><body onload="window.print();">');
winprint.document.write(sWinHTML);
winprint.document.write('</body></html>');
winprint.document.close();
winprint.focus();
}
这里使用内部脚本中编写的内联css进行divPrint。它正在工作。
Here divPrint using the inline css which was written in inside script. It''s working one.
在你的CSS文件中
你可以定义你的打印相关样式如下。
In your CSS file
you can define your print related styles as below.
@Media Print
{
//your print related styles goes here
}
在这个（X）HTML文档中，我已经链接到screen.css样式表，用于在屏幕上显示页面和打印时使用的样式.css样式表，用于打印时应使用的样式。
------------------------ ---------------------------------------
In this (X)HTML document I''ve linked to the screen.css style sheet for the styles that will be used when displaying the page onscreen and the print.css style sheet for the styles that should be used when printing.
---------------------------------------------------------------
<pre lang="HTML"></pre><head><br />
<link rel="stylesheet" media="screen" type="text/css" href="screen.css" /><br />
<link rel="stylesheet" media="print" type="text/css" href="print.css" /><br />
<br />
</head><br />
<html><br />
<!-- your html code goes here... --><br />
</html><br />
这篇关于使用Javascript打印支持CSS的网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
