DIV 태그의 요소를 인쇄 할 수 없습니다.

이 HTML 파일에서 드래그 가능하고 크기가 더 큰 DIV를 사용하고 있습니다. 사용자가 DIV 태그를 주 부모 DIV 태그의 원하는 위치에 배치합니다. 이제이 주요 DIV 태그를 인쇄하고 싶지만이 주 DIV를 인쇄하는 데 사용하는 코드는 사용자가 DIV를 정렬 한 방식이 아닌 시퀀스로 인쇄됩니다. 또한 주요 DIV 배경 이미지를 차지하지 않습니다. 여기에 코드가 있습니다.DIV 태그의 요소를 인쇄 할 수 없습니다.

JAVASCRIPT & CSS

여기에 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>

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

이미지가 더 명확하게하는 것입니다 당신이 당신의 CSS에 다음을 추가 할 수 있습니다 크롬과 사파리를 들어 enter image description here

출처

2012-07-02 Leroy Mikenzi

기본적으로 배경 이미지는 인쇄되지 않습니다. 또한 코드가 너무 많아서 JSFiddle로 시연 할 수 있다면 도움이 될 것입니다. – Utkanos

@Utkanos 저는 JSFIDDLE을 처음 사용합니다.이 부분에 대해 많이 편집 할 수 있습니다. 어떻게해야합니까? http : //jsfiddle.net/JpUuk/ –

@Utkanos PLS는 내가 가지고있는 이미지를 봅니다. 올려주기 ..... –

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

출처

2017-07-05 13:58:43

DIV 태그의 요소를 인쇄 할 수 없습니다.

답변

관련 문제