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

【问题标题】：How to Print the Particular bootstrap Div如何打印特定的引导程序 Div
【发布时间】：2017-04-30 18:59:15
【问题描述】：

我想打印一个bootstrap div。

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

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

我想按照这种风格打印的Div

我在打印时得到的输出是我不想在顶部的学校名称上看到的

调用打印功能的按钮：

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

【问题讨论】：

研究如何为media="print"创建样式表
@RoryMcCrossan 感谢重播和努力提供解决方案。我也创建了外部 css，但最后我没有得到解决方案，所以有必要寻求帮助。

标签： javascript jquery html ajax twitter-bootstrap

【解决方案1】：

检查此解决方案：它正在工作。 <div> 可以显示打印。

将您的<script>-tag 放在<html>-tag 上方：

<script>
<html>

https://jsfiddle.net/6cz5br7m/

【讨论】：

很棒的脚本！！
嗨，你有什么想法吗？关于我怎样才能显示图表JS？？？？

【解决方案2】：

它工作正常，只需在你的编辑器上试一试。

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

【讨论】：

【解决方案3】：

调用这个函数：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;
    }

【讨论】：

【解决方案4】：

您可以在 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

【讨论】：

如果我不使用 Bootstrap 模板，它可以完美地工作，并且比这家伙的问题更常见的布局

【解决方案5】：

在使用您的打印功能时，我能够找到不希望出现在模态打印中的部分，然后将其隐藏：


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

【讨论】：

【解决方案6】：

你只需要正确链接你的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>

【讨论】：

@Shivkumr Kondi Bro 感谢重播，但仍然出现同样的问题，但通过链接 style=print 解决了这个问题。 css 文件。