Javascript is used to print the specified area of a web page

  • 2020-03-26 21:41:05
  • OfStack

Recently, when I printed the class schedule on the web page, I searched the Internet for some materials and finally used the following methods to achieve the function I need. Put the table of the class table that needs to be printed into a div tag, then specify the area that needs to be printed, and finally call window.print to print the specified content.

Sample code (some of the code has been omitted)


function preview() {
    bdhtml = window.document.body.innerHTML;
    sprnstr = "<!--startprint-->";
    eprnstr = "<!--endprint-->";
    prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
    prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
    window.document.body.innerHTML = prnhtml;
    window.print();
}

Above is the javascript code, below is the HTML page code

        <div class="print">
            <input   type= "button" value= " Print the schedule " onclick= "preview()"/>
        </div>
        <div class="result">
             Class table query results 
        </div>
<center> This section is printed below </center>
        <!--startprint-->
        <div class="timetable">
            <table id="table1" class ="tableresult"style="margin-left :auto;margin-right:auto;">
                <tr >
                    <th>   </th>
                    <th> Monday </th>
                    <th> Tuesday </th>
                    <th> Wednesday </th>
                    <th> Thursday </th>
                    <th> Friday </th>
                    <th> Saturday </th>
                    <th> Sunday </th>
                </tr>
                <tr >
                    <th> 1,2  section </th>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td></td>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td></td>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td></td>
                    <td></td>
                </tr>
                <tr >
                    <th> 3,4  section </th>
                    <td></td>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td></td>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td></td>
                    <td></td>
                </tr>
                <tr >
                    <th> 5,6  section </th>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td></td>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td> Information technology (it) <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                </tr>
                <tr >
                    <th> 7,8  section </th>
                    <td></td>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td> University information technology course <br> Institute of several letters <br>501 Computer room <br> Biological professional </td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
         <!--endprint-->
<center> This section is printed above </center>


Related articles: