어떻게 자바 스크립트 렌더링 된 HTML 페이지의 일부를 인쇄 할 수 있습니까?

해결법

1.나는이 같은 다소 그것에 대해 갈 것입니다 :

나는이 같은 다소 그것에 대해 갈 것입니다 :

<html>
    <head>
        <title>Print Test Page</title>
        <script>
            printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">')
            function printDiv(divId) {
                window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML;
                window.frames["print_frame"].window.focus();
                window.frames["print_frame"].window.print();
            }
        </script>
    </head>

    <body>
        <h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1>
        <b>Div 1:</b> <a href="javascript:printDiv('div1')">Print</a><br>
        <div id="div1">This is the div1's print output</div>
        <br><br>
        <b>Div 2:</b> <a href="javascript:printDiv('div2')">Print</a><br>
        <div id="div2">This is the div2's print output</div>
        <br><br>
        <b>Div 3:</b> <a href="javascript:printDiv('div3')">Print</a><br>
        <div id="div3">This is the div3's print output</div>
        <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
    </body>
</html>

2.제안의 일부와 같은 라인을 따라 당신은 적어도 다음을 수행해야합니다 :

제안의 일부와 같은 라인을 따라 당신은 적어도 다음을 수행해야합니다 :

예제 CSS는이 단순하게 될 수있다 :

@media print {
  body * {
    display:none;
  }

  body .printable {
    display:block;
  }
}

인쇄가 발생하면 - (별도의 운동 한 다른 충돌의 CSS 규칙이없는 것처럼) 귀하의 자바 스크립트 만 대상 사업부에 "인쇄"클래스를 적용해야하며 볼 수있는 유일한 일이 될 것입니다.

<script type="text/javascript">
  function divPrint() {
    // Some logic determines which div should be printed...
    // This example uses div3.
    $("#div3").addClass("printable");
    window.print();
  }
</script>

당신은 인쇄가 발생한 후 선택적으로 대상에서 클래스를 제거하려면, 및 / 또는 인쇄가 발생한 후 동적으로 추가 CSS를 제거 할 수 있습니다.

다음은 전체 작업 예는, 유일한 차이점은 인쇄 CSS는 동적으로로드되지 않는 것입니다. 당신이 정말 눈에 거슬리지되고 싶은 경우에 당신이 대답처럼 CSS를 동적으로로드해야합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Print Portion Example</title>
    <style type="text/css">
      @media print {
        body * {
          display:none;
        }

        body .printable {
          display:block;
        }
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  </head>

  <body>
    <h1>Print Section Example</h1>
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
    <div id="div3">Div 3</div>
    <div id="div4">Div 4</div>
    <div id="div5">Div 5</div>
    <div id="div6">Div 6</div>
    <p><input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" /></p>
    <script type="text/javascript">
      function divPrint() {
        // Some logic determines which div should be printed...
        // This example uses div3.
        $("#div3").addClass("printable");
        window.print();
      }
    </script>
  </body>
</html>

3.이 자바 스크립트 코드를 사용해보십시오 :

이 자바 스크립트 코드를 사용해보십시오 :

function printout() {

    var newWindow = window.open();
    newWindow.document.write(document.getElementById("output").innerHTML);
    newWindow.print();
}

4.

<div id="invocieContainer">
    <div class="row">
        ...Your html Page content here....
    </div>
</div>

<script src="/Scripts/printThis.js"></script>
<script>
    $(document).on("click", "#btnPrint", function(e) {
        e.preventDefault();
        e.stopPropagation();
        $("#invocieContainer").printThis({
            debug: false, // show the iframe for debugging
            importCSS: true, // import page CSS
            importStyle: true, // import style tags
            printContainer: true, // grab outer container as well as the contents of the selector
            loadCSS: "/Content/bootstrap.min.css", // path to additional css file - us an array [] for multiple
            pageTitle: "", // add title to print page
            removeInline: false, // remove all inline styles from print elements
            printDelay: 333, // variable print delay; depending on complexity a higher value may be necessary
            header: null, // prefix to html
            formValues: true // preserve input/form values
        });

    });
</script>

5.당신은 인쇄 스타일 시트를 사용할 수 있지만이 모든 인쇄 기능에 영향을 미칠 것입니다.

당신은 인쇄 스타일 시트를 사용할 수 있지만이 모든 인쇄 기능에 영향을 미칠 것입니다.

그 제거 뒤에,) window.print를 (당신은 externalally 인쇄 스타일 시트를 가지고 시도 할 수 있고, 버튼을 누를 때 자바 스크립트로 포함되어, 다음 호출합니다.

from https://stackoverflow.com/questions/1071962/how-do-i-print-part-of-a-rendered-html-page-in-javascript by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 아약스 기능의 데이터로 전체 양식에 합격 (0)	2020.10.24
[JQUERY] JQuery와 자동 증가 플러그인에 대한 텍스트 필드가 있습니까? (0)	2020.10.24
[JQUERY] 어떻게 jQuery를 사용하여 CSS를 변경하려면? (0)	2020.10.24
[JQUERY] 어떻게 자바 스크립트를 사용하여 요소의 XPath는 위치를 계산하는? (0)	2020.10.24
[JQUERY] 제출에 방지 폼 리디렉션 또는 새로 고침? (0)	2020.10.24

복붙노트

[JQUERY] 어떻게 자바 스크립트 렌더링 된 HTML 페이지의 일부를 인쇄 할 수 있습니까?

어떻게 자바 스크립트 렌더링 된 HTML 페이지의 일부를 인쇄 할 수 있습니까?

해결법

1.나는이 같은 다소 그것에 대해 갈 것입니다 :

2.제안의 일부와 같은 라인을 따라 당신은 적어도 다음을 수행해야합니다 :

3.이 자바 스크립트 코드를 사용해보십시오 :

4.

5.당신은 인쇄 스타일 시트를 사용할 수 있지만이 모든 인쇄 기능에 영향을 미칠 것입니다.

'JQUERY' 카테고리의 다른 글

티스토리툴바