css 不打印 iframe 上的效果

Question

我正在创建一个使用了 iframe 的程序。我在 iframe 上应用 css，它在浏览器上运行良好。但是当我尝试打印那个 iframe 时，css 效果没有出现。我尝试从 IE、Chrome、Mozilia 和 Edge 打印 iframe。但其中 none 打印正常。页面上仅显示部分效果。谁能告诉我解决方案？

谢谢:)

我的程序中有两个文件。我的代码如下：

createForm.php

<?php

$clmns=$_REQUEST['clmns'];
$rows=$_REQUEST['rows'];

$form="<center><table>";

for($i = 1; $i <= 2; $i++)
{
$form.="<tr>";

for($j = 1; $j <= $clmns; $j++)
{
    $form.="<td><textarea style='background-color:rgb(249,208,191); color:brown; font-weight:bold; border:solid 3px brown;' id=".$i."_".$j." rows=".$rows." cols=20></textarea></td>";
}

$form.="</tr>";

}

$form.="</table></center>";

$form.="<input type=button value=Save onclick=saveData()     />";

echo $form;

?>

home.php

    <html>

<head>

<style type="text/css">

iframe
{
width:800px;
height:500px;
background-color: blue;
border:solid 5px brown;
}

</style>

<script type="text/javascript">

var xmlhttp;

function createForm()
{
var clmns=document.getElementById('clmns').value;
var rows=document.getElementById('rows').value;

document.getElementById('dataEntryForm').src="createForm.php?clmns="+clmns+"&rows="+rows;
}

function saveData()
{
    if(window.XMLHttpRequest)
{
    xmlhttp=new XMLHttpRequest();
}
else
{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

var v1=document.getElementById('1_1').value;
alert(v1);
xmlhttp.open("POST","saveData.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("data="+v1);

    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {   
            alert(xmlhttp.responseText);
            //document.getElementById('dataEntryForm').innerHTML=xmlhttp.responseText;
        }
    }
}


function printMe()
{
var x = document.getElementById("dataEntryForm");
var y = x.contentWindow.print();
}

</script>

</head>

<body>

<table>

<tr>
<td>Enter Number of Columns Required :</td>
<td><input type="text" id="clmns" /></td>
</tr>

<tr>
<td>Enter Number of Maximum rows Required :</td>
<td><input type="text" id="rows" /></td>
</tr>

<tr>
<td colspan="2"><input type="button" value="Show Form" onclick="createForm()"/></td>
</tr>

</table>

<br/><br/>

<iframe name="frame1" id="dataEntryForm"></iframe>
<input type=button onclick="printMe()" />


</body>
</html>

Answer 1

我遇到了同样的问题 N-C。我在这么多网站上搜索了很多。时间长了，发现是浏览器限制了这种情况。您只需启用背景颜色打印选项。我曾使用过 Mozilia Firefox。在此按照以下步骤打印背景颜色：

文件 -> 页面设置 ->（选中选项）打印背景（颜色和图像）

您也会在其他浏览器中找到类似的选项。

css 不打印 iframe 上的效果

css effects on iframe are not printed

javascript

css

php

ajax

iframe