1. 홈
  2. 질의 응답
  3. 스타일로 표를 인쇄하는 방법

스타일로 표를 인쇄하는 방법

2014-06-10 6 views
4

SharePoint의 스타일로 페이지를 인쇄 할 수 없습니다. 아래 두 이미지를보십시오. media="all" 또는 media="print"을 <style type=text/css>에 추가했으나 작동하지 않았습니다.스타일로 표를 인쇄하는 방법

  • 화면 인쇄 버튼

2

을 클릭에 대한

1

  • 대기를 인쇄하기 전에

    HTML :

    <input onclick="printDiv('page_printer');" type="button" value="Print" style="font-family: Verdana,Arial,sans-serif !important; font-size: 8pt !important; width: 150px !important;"></input> 
<table id="page_printer"> 
<tr> 
    <td> 
     <table border="0" cellspacing="0" width="100%"> 
      <tr> 
       <td> 
        <fieldset class="box"> 
         <legend class="text_transportation">EMPLOYEE GATE PASS</legend> 
         <table> 
          <tr> 
           <td width="190px" valign="top" class="ms-formlabel"> 
            <h3 class="ms-standardheader"> 
             <nobr>Date</nobr> 
            </h3> 
           </td> 
          </tr> 
         </table> 
        </fieldset> 
       </td> 
      </tr> 
     </table> 
    </td> 
</tr> 
</table>

    CSS :

    .ms-bodyareaframe { 
    padding: 8px; 
    border: none; 
} 
.text_transportation { 
    font-size: large; 
    color: red; 
} 
.text_approveStep { 
    font-size: small; 
    color: red; 
} 
.box { 
    width: 750px !important; 
} 
.set_width { 
    width: 350px !important; 
} 
.set_backgr { 
    text-decoration: none !important; 
    color: #0072BC !important; 
    font-family: Verdana, Arial, sans-serif !important; 
    border: none !important; 
    background-color: #F6F6F6 !important; 
} 
.set_backgr:hover { 
    text-decoration: none !important; 
    cursor: pointer; 
} 
.readOnly { 
    background-color: #F6F6F6 !important; 
    color: #676767 !important; 
    border: none !important; 
    cursor: default; 
}

    자바 스크립트 :

    function printDiv(divID) { 
    //Get the HTML of div 
    var divElements = document.getElementById(divID).innerHTML; 
    //Get the HTML of whole page 
    var oldPage = document.body.innerHTML; 

    //Reset the page's HTML with div's HTML only 
    document.body.innerHTML = 
     "<html><head><title></title></head><body>" + divElements + "</body>"; 

    //window.print(); 
    //document.body.innerHTML = oldPage; 

    //Print Page 
    setTimeout(function() { 
     print_page(); 
    }, 2000); 

    function print_page() { 
     window.print(); 
    } 

    //Restore orignal HTML 
    setTimeout(function() { 
     restore_page(); 
    }, 3000); 

    function restore_page() { 
     document.body.innerHTML = oldPage; 
    } 
}

출처

2014-06-10 Huy DQ

답변

0

당신은을 사용할 수 있습니다

@media print { p { font-size: 20px; color: red; } }

휴대 전화 용으로 디자인 할 때와 같은 코드입니다.

출처

2014-06-10 01:53:42 user2352120

+0

의견을 보내 주셔서 감사합니다. 스타일로 인쇄하고 싶습니다. 그러나 작동하지 않았습니다. 귀하의 코드를 시도했지만 작동하지 않습니다. –

관련 문제

 관련 문제