如何打印特定的bootstrap Div

时间：2016-12-15 08:35:26

标签： javascript jquery html ajax twitter-bootstrap

我想打印 bootstrap div 。

它在网络浏览器中正确显示但是当我点击打印按钮然后在打印预览时，元素是浮动的并且没有正确显示。

我该怎么做才能解决这个问题？

我想按照这种风格打印的Div enter image description here

我在打印时获得的输出，我不希望在顶部的学校名称上看到 enter image description here

调用打印功能的按钮： 

<button class="btn btn-default" onclick="printDiv('printableArea')"><i class="fa fa-print" aria-hidden="true" style="    font-size: 17px;"> Print</i></button>

打印功能： 

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

我要打印的Div 

<div class="container right-container col-md-6" id="printableArea" style="display:block;">
    <span id="link7">   
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <h3 id="school_title"><?php echo "$school_name";?> </h3>
                <p><p> 
                <p style="font-size: 1.1em;" id="exam_title">Annual Examination [ 2015-2016 ] <p> 
                <div class="row">
                    <div class="col-md-4">
                        <div class="header-time-date-marks">
                            <span id="exam_time">Time: 12 AM - 2 PM</span>
                            <span id="exam_date">Date: 30/12/2016</span>
                        </div>
                    </div>
                    <div class="col-md-8 header-time-date-marks" style="text-align: right;padding-right: 36px;">
                        <span id="exam_marks">100 Marks</span>
                    </div>
                </div>
            </div>
        </div>
        <hr / id="line" style="margin-top: 13px;">
        <div class="row q-question-type-style" id='question_section'>
        </div>
    </span>
</div>

6 个答案:

答案 0 :(得分：2)

查看此解决方案：它正在运行。 Div可以显示打印

将您的脚本标记放在html

之上 
<script>
<html>

https://jsfiddle.net/6cz5br7m/

答案 1 :(得分：1)

调用此函数：PrintElem（＆＃39; printableArea＆＃39;）

function PrintElem(elem){
        var mywindow = window.open('', 'PRINT', 'height=400,width=600');

        var css = "";
        var myStylesLocation = "${pageContext.request.contextPath}/ui/css/bootstrap.min.css";

        $.ajax({
            url: myStylesLocation,
            type: "POST",
            async: false
        }).done(function(data){
            css += data;
        }) 

        mywindow.document.write('<html><head><title></title>');
        mywindow.document.write('<style type="text/css">'+css+' </style>');
      //  mywindow.document.write('<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/css/bootstrap.min.css" type="text/css" media="print"/>');
        mywindow.document.write('</head><body >');
        mywindow.document.write('<h1>' + document.title  + '</h1>');
        mywindow.document.write(document.getElementById(elem).innerHTML);
        mywindow.document.write('</body></html>');
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10*/

        mywindow.print(); 
        mywindow.close();


        return true;
    }

答案 2 :(得分：1)

您可以在css中尝试@media print。 像吼叫一样

在css中

 @media print
   {
      p.bodyText {font-family:georgia, times, serif;}
      .noprint
      {
        display:none
      }
   }

在Html中

<div class="noprint">
I dont want it on print
</div>
<br><br>
<div>
Prrintable Area
</div>

Fiddle

答案 3 :(得分：0)

你只需要正确链接你的js脚本

<!DOCTYPE html>
<html>
<body>

<div class="container right-container col-md-6" id="printableArea" style="display:block;">
    <span id="link7">   
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <h3 id="school_title"><?php echo "$school_name";?> </h3>
                <p><p> 
                <p style="font-size: 1.1em;" id="exam_title">Annual Examination [ 2015-2016 ] <p> 
                <div class="row">
                    <div class="col-md-4">
                        <div class="header-time-date-marks">
                            <span id="exam_time">Time: 12 AM - 2 PM</span>
                            <span id="exam_date">Date: 30/12/2016</span>
                        </div>
                    </div>
                    <div class="col-md-8 header-time-date-marks" style="text-align: right;padding-right: 36px;">
                        <span id="exam_marks">100 Marks</span>
                    </div>
                </div>
            </div>
        </div>
        <hr / id="line" style="margin-top: 13px;">
        <div class="row q-question-type-style" id='question_section'>
        </div>
    </span>
</div>

 <div> <h1>
 asdads
 </h1>
</div>


<button class="btn btn-default" onclick="printDiv('printableArea')"><i class="fa fa-print" aria-hidden="true" style="    font-size: 17px;"> Print</i></button>
<script>
function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}
</script>

</body>
</html>

答案 4 :(得分：0)

我能够使用模版功能查找模态打印中不希望出现的部分，并隐藏它：


  print() {
    let mainLayout = document.querySelector('app-main-layout') as HTMLDivElement;
    mainLayout.style.display = 'none';

    window.print();

    mainLayout.style.display = 'unset';
  }

然后，使用以下CSS，使我的模式按钮消失：

@media print {
  button.close {display:none !important;}
}

答案 5 :(得分：0)

它正在运行，只需在您的编辑器上尝试即可。

<!-- Your Jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <!-- Another Jquery version, which will be compatible with PrintThis.js -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <!-- CDN/Reference To the pluggin PrintThis.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.js"
        integrity="sha512-Fd3EQng6gZYBGzHbKd52pV76dXZZravPY7lxfg01nPx5mdekqS8kX4o1NfTtWiHqQyKhEGaReSf4BrtfKc+D5w=="
        crossorigin="anonymous"></script>

    <script type="text/javascript">
        // important : to avoid conflict between the two version of Jquery
        var j = jQuery.noConflict(true);

        // define a function that you can call as an EventListener or whatever you want ...
        function Print_Specific_Element() {
            // the element's id must be unique .. 
            // you can't print multiple element, but can put them all in one div and give it an id, then you will be able to print them !
            // use the 'j' alias to call PrintThis, with its compatible version of jquery 
            j('#specificElement').printThis({
                importCSS: true, // to import the page css
                importStyle: true, // to import <style>css here will be imported !</style> the stylesheets (bootstrap included !)
                loadCSS: true, // to import style="The css writed Here will be imported !"
                canvas: true // only if you Have image/Charts ... 
            });
        }

        $("#printBtn").click(Print_Specific_Element);
    </script>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- It's very important to include the attribute : media='all'-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" media='all'
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <style>
        @media print {
            @page {
                /* To give the user the possibility to choise between landscape and portrait printing format */
                size: auto;
                /* setting custom margin, so the date and the url can be displayed */
                margin: 40px 10px 35px;
            }

            /* Here you can give a custom styling which will be applied only while printing  */
            a,
            button#printBtn {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div class="container" id="Page">
        <div>
            this Element will not be printed
        </div>
        <div id="specificElement" class="bg-primary m-2 p-2 text-center rounded" style="border: 2px solid black;">
            <div class="jumbotron">
                <h1 class="display-3">
                    My custom content which I want to print
                </h1>
                <p class="lead">Another element</p>
                <hr class="my-2">
                <p>Nothing ... just another element </p>
                <button id="printBtn" class="btn btn-success btn-sm shadow">
                    CLick Me !
                    <br>
                    (Dont worry I will not be printed)
                </button>
            </div>

        </div>
    </div>

    
</body>

</html>

相关问题
最新问题