个人中心
gpt4 book ai didi

javascript - 无法打印 DIV 标签中的元素

转载 作者：太空宇宙 更新时间：2023-11-03 19:03:21 24 4
gpt4 key购买 nike

我在此 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>

上图更清晰 enter image description here enter image description here

最佳答案

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

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

关于javascript - 无法打印 DIV 标签中的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11290811/

24 4 0
文章推荐： python, mechanize - 使用 mechanize 打开文本文件
文章推荐： list - 如何递归检查列表是否在 Lisp 中排序？
文章推荐： lisp - 普通口齿不清 : read each input character as a list element
文章推荐： python - 从大量条目创建可迭代列表
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com