Print
only?

前端 未结 30 1601
暖寄归人
暖寄归人 2020-11-22 00:25

How do I print the indicated div (without manually disabling all other content on the page)?

I want to avoid a new preview dialog, so creating a new window with this

相关标签:
30条回答
  • 2020-11-22 00:40

    Step 1: Write the following javascript inside your head tag

    <script language="javascript">
    function PrintMe(DivID) {
    var disp_setting="toolbar=yes,location=no,";
    disp_setting+="directories=yes,menubar=yes,";
    disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
       var content_vlue = document.getElementById(DivID).innerHTML;
       var docprint=window.open("","",disp_setting);
       docprint.document.open();
       docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
       docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
       docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
       docprint.document.write('<head><title>My Title</title>');
       docprint.document.write('<style type="text/css">body{ margin:0px;');
       docprint.document.write('font-family:verdana,Arial;color:#000;');
       docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
       docprint.document.write('a{color:#000;text-decoration:none;} </style>');
       docprint.document.write('</head><body onLoad="self.print()"><center>');
       docprint.document.write(content_vlue);
       docprint.document.write('</center></body></html>');
       docprint.document.close();
       docprint.focus();
    }
    </script>
    

    Step 2: Call the PrintMe('DivID') function by an onclick event.

    <input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
    <div id="divid">
    here is some text to print inside this div with an id 'divid'
    </div>
    
    0 讨论(0)
  • 2020-11-22 00:41

    hm ... use the type of a stylsheet for printing ... eg:

    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
    

    print.css:

    div { display: none; }
    #yourdiv { display: block; }
    
    0 讨论(0)
  • 2020-11-22 00:44

    base on @Kevin Florida answer, i made a way to avoid script on current page disable because of overwrite content. I use other file called "printScreen.php" (or .html). Wrap everything you want to print in a div "printSource". And with javascript, open a new window you created before ("printScreen.php") then grab content in "printSource" of top window.

    Here is the code.

    Main window :

    echo "<div id='printSource'>";
    //everything you want to print here
    echo "</div>";
    
    //add button or link to print
    echo "<button id='btnPrint'>Print</button>";
    
    <script>
      $("#btnPrint").click(function(){
        printDiv("printSource");
      });
    
      function printDiv(divName) {
       var printContents = document.getElementById(divName).innerHTML;
       var originalContents = document.body.innerHTML;
       w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
       }
    </script>
    

    This is "printScreen.php" - other file to grab content to print

    <head>
    // write everything about style/script here (.css, .js)
    
    </head>
    <body id='mainBody'></body>
    </html>
    
    
    <script>
        //get everything you want to print from top window
        src = window.opener.document.getElementById("printSource").innerHTML;
    
        //paste to "mainBody"
        $("#mainBody").html(src);
        window.print();
        window.close();
    </script>
    
    0 讨论(0)
  • 2020-11-22 00:45

    The Best way to Print particular Div or any Element

    printDiv("myDiv");
    
    function printDiv(id){
            var printContents = document.getElementById(id).innerHTML;
            var originalContents = document.body.innerHTML;
            document.body.innerHTML = printContents;
            window.print();
            document.body.innerHTML = originalContents;
    }
    
    0 讨论(0)
  • 2020-11-22 00:45

    I found the solution.

    @media print {
        .print-area {
            background-color: white;
            height: 100%;
            width: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index:1500;
            visibility: visible;
        }
        @page{
            size: portrait;
            margin: 1cm;
        }
    /*IF print-area parent element is position:absolute*/
        .ui-dialog,
        .ui-dialog .ui-dialog-content{
            position:unset !important;
            visibility: hidden;
        }
    }
    
    0 讨论(0)
  • 2020-11-22 00:47

    All the answers so far are pretty flawed - they either involve adding class="noprint" to everything or will mess up display within #printable.

    I think the best solution would be to create a wrapper around the non-printable stuff:

    <head>
        <style type="text/css">
    
        #printable { display: none; }
    
        @media print
        {
            #non-printable { display: none; }
            #printable { display: block; }
        }
        </style>
    </head>
    <body>
        <div id="non-printable">
            Your normal page contents
        </div>
    
        <div id="printable">
            Printer version
        </div>
    </body>
    

    Of course this is not perfect as it involves moving things around in your HTML a bit...

    0 讨论(0)
提交回复
热议问题