我正在处理一组需要打印的HTML报告。 屏幕上的一切看起来都很正常,但打印页面时,所有文本元素周围都有一个白框。
这是屏幕上页面的屏幕截图: 屏幕上的屏幕截图http://oi41.tinypic.com/345onf4.jpg
以下是使用系统打印对话框打印的PDF的屏幕截图: 使用系统打印对话框http://oi43.tinypic.com/2vvmc9c.jpg打印的PDF的屏幕截图
这是HTML:
<!DOCTYPE html> <html> <head> <link rel="Stylesheet" type="text/css" href="../css/style.css" media="all"/> </head> <body> <div id="container"> <div id="menu"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content"> Content goes here</div> </body> </html>这是CSS:
@media print { /* Hides elements on page when printed */ .nonPrinting { display: none; } /* Forces the background colors / images to display when printing */ body { -webkit-print-color-adjust : exact; } } #container { width:500px; } #menu { background-color:#FFD700; height:200px; width:100px; float:left; } #content { background-color:#EEEEEE; height:200px; width:400px; float:left; }页面在node-webkit应用程序内运行。
I am working on a set of HTML reports that need to be printed. Everything looks OK on the screen, but a white box surrounds all of the text elements when the page is printed.
Here is a screen shot of the page on screen: screen shot of the page on screen http://oi41.tinypic.com/345onf4.jpg
Here is a screen shot of a PDF printed using the system print dialog: screen shot of a PDF printed using the system print dialog http://oi43.tinypic.com/2vvmc9c.jpg
Here's the HTML:
<!DOCTYPE html> <html> <head> <link rel="Stylesheet" type="text/css" href="../css/style.css" media="all"/> </head> <body> <div id="container"> <div id="menu"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content"> Content goes here</div> </body> </html>Here is the CSS:
@media print { /* Hides elements on page when printed */ .nonPrinting { display: none; } /* Forces the background colors / images to display when printing */ body { -webkit-print-color-adjust : exact; } } #container { width:500px; } #menu { background-color:#FFD700; height:200px; width:100px; float:left; } #content { background-color:#EEEEEE; height:200px; width:400px; float:left; }The pages are running inside of a node-webkit application.
最满意答案
您是否尝试在这些元素上指定特定的背景颜色?
尝试
background-color : transparent;要么
background-color: #FFD700;关于#menu的子元素
编辑
这就是'print'pdf对我来说的样子:
编辑:
也许这是一个驱动程序问题?
Have you tried assigning a specific background-color on these elements?
Try
background-color : transparent;or
background-color: #FFD700;on the child elements of #menu
EDIT
This is how the 'printed' pdf looks like for me:
EDIT:
Maybe it's a driver issue?
更多推荐
发布评论