Question

我在这个HTML文件中使用了可拖动且可重新调整大小的DIV。用户将DIV标记放置在主父DIV标记中的所需位置。现在我想要打印这个主要的DIV标签，但问题是我用来打印这个主DIV的代码是按照顺序打印的，就像用户安排DIV的方式一样。它也不占用主要的DIV背景图像。这是代码。

JAVASCRIPT＆amp; CSS

<link rel="stylesheet" type="text/css" href="byrei-dyndiv_0.5.css">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> 
<script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"></script>   
<script language="javascript" type="text/javascript"> 
function change(boxid,divtoaffect) { 
content = document.getElementById("" + boxid + "").value.replace(/\n/g, '<br>'); 
document.getElementById(divtoaffect).innerHTML = content; 
} 
function select1() {
test=document.getElementById("changeMe");
test.style.backgroundImage="url('Sunset.jpg')";
}

function select2() {
test=document.getElementById("changeMe");
test.style.backgroundImage="url('Blue hills.jpg')";
}


    function PrintElem(elem)
    {
        Popup($(elem).text());
    }

    function Popup(data) 
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('<html><head><title>my div</title>');
        /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');
        mywindow.document.close();
        mywindow.print();
        return true;
    }  

//  Print DIV

function printContent(id){
                            str=document.getElementById(id).innerHTML
                            newwin=window.open('','printwin','left=100,top=100,width=400,height=400')
                            newwin.document.write('<HTML>\n<HEAD>\n')
                            newwin.document.write('<TITLE>Print Page</TITLE>\n')
                            newwin.document.write('<script>\n')
                            newwin.document.write('function chkstate(){\n')
                            newwin.document.write('if(document.readyState=="complete"){\n')
                            newwin.document.write('window.close()\n')
                            newwin.document.write('}\n')
                            newwin.document.write('else{\n')
                            newwin.document.write('setTimeout("chkstate()",2000)\n')
                            newwin.document.write('}\n')
                            newwin.document.write('}\n')
                            newwin.document.write('function print_win(){\n')
                            newwin.document.write('window.print();\n')
                            newwin.document.write('chkstate();\n')
                            newwin.document.write('}\n')
                            newwin.document.write('<\/script>\n')
                            newwin.document.write('</HEAD>\n')
                            newwin.document.write('<BODY onload="print_win()">\n')
                            newwin.document.write(str)
                            newwin.document.write('</BODY>\n')
                            newwin.document.write('</HTML>\n')
                            newwin.document.close()
                        }

</script> 
</head> 
<body> 
<style type="text/css">
#output1,#output2 ,#output3 {
width: 300px;
word-wrap: break-word;
border: solid 1px black;
}



</style>

HTML

<div style="width:650px;height:300px;" id="changeMe" >

        <table cellpadding="5" cellspacing="0" width="100%" style="margin:auto;">
            <tr>
                <td><div class="dynDiv_moveDiv" id="output1" style="font-weight:bold;height:20px;margin-top:40px;">
                    <div class="dynDiv_resizeDiv_tl"></div>
                     <div class="dynDiv_resizeDiv_tr"></div>
                     <div class="dynDiv_resizeDiv_bl"></div>
                     <div class="dynDiv_resizeDiv_br"></div>
                    </div>
                    </td>
            </tr>
            <tr>
                <td><div class="dynDiv_moveDiv" id="output2" style="height:40px;margin-top:30px;">
                    <div class="dynDiv_resizeDiv_tl"></div>
                     <div class="dynDiv_resizeDiv_tr"></div>
                     <div class="dynDiv_resizeDiv_bl"></div>
                     <div class="dynDiv_resizeDiv_br"></div>
                    </div></td>
            </tr>   
            <tr>
                <td><div class="dynDiv_moveDiv" id="output3" style="height:50px;margin-top:40px;">
                    <div class="dynDiv_resizeDiv_tl"></div>
                     <div class="dynDiv_resizeDiv_tr"></div>
                     <div class="dynDiv_resizeDiv_bl"></div>
                     <div class="dynDiv_resizeDiv_br"></div>
                    </div></td>
            </tr>   
        </table>
    </div>
<tr>
    <td align="center"><input type="button" value="Print Div" onClick="printContent('changeMe')" />
    </td>
</tr>

这里的图像更清晰 enter image description here

Answer 1

对于Chrome和Safari，您可以在CSS中添加以下内容：

@media print
{
    * {-webkit-print-color-adjust:exact;}
}

无法在DIV标记中打印元素

1 个答案: