如何打印特定的引导程序 Div

Question

I would like to print a bootstrap div .我想打印一个引导 div 。

It is properly displayed in web browser but when I click on the print button then at print preview, the elements are floating and are not properly displayed.它在网络浏览器中正确显示，但是当我点击打印按钮然后在打印预览时，元素是浮动的并且没有正确显示。

what should I do to solve this problem ?我该怎么做才能解决这个问题？

Div which I want to print with following this style我想按照这种风格打印的 Div

What I get the output at printing time which I dont want see on school name at the top我在打印时得到的输出，我不想在顶部的学校名称上看到

Button which call the print function:调用打印函数的按钮：

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

Print Function:打印功能：

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 which i Want to print我想打印的 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>

Answer 1

Check this solution: It is working.检查此解决方案：它正在工作。 The <div> is able to display for print. <div>能够显示以供打印。

Place your <script> -tag above the <html> -tag:将您的<script> -tag 放在<html> -tag 上方：

<script>
<html>

https://jsfiddle.net/6cz5br7m/ https://jsfiddle.net/6cz5br7m/

Answer 2

Call this function: PrintElem('printableArea')调用这个函数： PrintElem('printableArea')

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

Answer 3

You can try @media print in css.您可以在 css 中尝试@media print 。 Like bellow像下面这样

In css在 CSS 中

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

In Html在 HTML 中

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

Fiddle小提琴

Answer 4

I was able to look for the section that was undesirably appearing in the print of the modal, and just hiding it, while using your print function:我能够在使用您的打印功能时查找不希望出现在模态打印中的部分，并将其隐藏：


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

    window.print();

    mainLayout.style.display = 'unset';
  }

And, make the buttons of my modal go away, by using this css:并且，通过使用这个 css，让我的模态按钮消失：

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

Answer 5

It's working, just try it on your Editor.它正在工作，只需在您的编辑器上尝试即可。

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

Answer 6

you just need to link your js script properly你只需要正确链接你的 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>

如何打印特定的引导程序 Div

问题描述

6 个解决方案

解决方案1
5 2016-12-15 08:53:40

解决方案2
1 2017-07-11 05:04:30

解决方案3
1 2017-07-11 07:26:24

解决方案4
1 2019-08-09 19:22:38

解决方案5
1 2020-11-15 03:36:05

解决方案6
-1 2016-12-15 09:06:26

如何打印特定的引导程序 Div

问题描述

6 个解决方案

解决方案1 5 2016-12-15 08:53:40

解决方案2 1 2017-07-11 05:04:30

解决方案3 1 2017-07-11 07:26:24

解决方案4 1 2019-08-09 19:22:38

解决方案5 1 2020-11-15 03:36:05

解决方案6 -1 2016-12-15 09:06:26

解决方案1
5 2016-12-15 08:53:40

解决方案2
1 2017-07-11 05:04:30

解决方案3
1 2017-07-11 07:26:24

解决方案4
1 2019-08-09 19:22:38

解决方案5
1 2020-11-15 03:36:05

解决方案6
-1 2016-12-15 09:06:26