1

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

JAVASCRIPT & 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>

这是更清晰的图像 在此处输入图像描述 在此处输入图像描述

4

1 回答 1

0

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

@media print
{
    * {-webkit-print-color-adjust:exact;}
}
于 2017-07-05T13:58:43.163 回答