diaobiaoqi0148
diaobiaoqi0148

html页面以及表格数据打印的实现

记录是为了更好的成长！

 

页面打印功能很常见，总结一下：

1、打印表格中的数据

　　页面引入jquery，也可以不引入，使用jquery操作DOM对象是很方便的

　　这是一个简单的演示：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
        <script src="js/jquery-3.3.1.min.js">script>
    head>
    <body>
        <div id="dayin">
        <table border="1" cellspacing="0" width="100%">
            <caption>员工考核管理caption>
            <thead>
                <tr>
                    <th>编号th>
                    <th>姓名th>
                    <th>年龄th>
                    <th>地址th>
                    <th>用户名th>
                    <th>邮箱th>
                    <th>手机号th>
                    <th>电话号码th>
                tr>
            thead>
            <tbody>
                <tr>
                    <td>1td>
                    <td>张三td>
                    <td>22td>
                    <td>上海址td>
                    <td>asdftd>
                    <td>[email protected]td>
                    <td>123123123123123td>
                    <td>11111111111td>
                tr>
                <tr>
                    <td>1td>
                    <td>张三td>
                    <td>22td>
                    <td>上海址td>
                    <td>asdftd>
                    <td>[email protected]td>
                    <td>123123123123123td>
                    <td>11111111111td>
                tr>
            tbody>
        table>
        
        div>
        <iframe id="iframe1" style="display: none">iframe>
        <button>打印button>
    body>
    <script type="text/javascript">
         $("button").click(function(){
            bdhtml=$("#dayin").html();
            //alert(bdhtml);
            sprnstr="";   //开始打印标识字符串有17个字符
            eprnstr="";        //结束打印标识字符串
            prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
            prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//截取开始标识和结束标识之间的内容
            var iframe = null;
            iframe = document.getElementById("iframe1")
            
            var iwindow = null;
            var iwindow = iframe.contentWindow;//获取iframe的window对象
            iwindow.document.close();
            iwindow.document.write(prnhtml);
            iwindow.print(); //调用浏览器的打印功能打印指定区域
        });
    script>
html>

　　这是打印表格数据的方法，很简单吧！主要是 "" 和  ""比较重要，直接影响打印的内容，所以位置请放正确！

2、打印页面

　　网上有一种jqprint插件，其实也是js打印，打印的是整个页面内容，如果需要打印表格数据，可以把需要打印的表格做成单独的页面来进行打印。

　　引入jquery，jquery不必多说，引入jquery.jqprint-0.3.js；

　　jquery.jqprint-0.3.js源码如下，不多，直接复制到页面中就行；

// -----------------------------------------------------------------------
// Eros Fratini - [email protected]
// jqprint 0.3
//
// - 19/06/2009 - some new implementations, added Opera support
// - 11/05/2009 - first sketch
//
// Printing plug-in for jQuery, evolution of jPrintArea: http://plugins.jquery.com/project/jPrintArea
// requires jQuery 1.3.x
//
// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
//------------------------------------------------------------------------

(function($) {
    var opt;

    $.fn.jqprint = function (options) {
        opt = $.extend({}, $.fn.jqprint.defaults, options);

        var $element = (this instanceof jQuery) ? this : $(this);
        
        if (opt.operaSupport && $.browser.opera) 
        { 
            var tab = window.open("","jqPrint-preview");
            tab.document.open();

            var doc = tab.document;
        }
        else 
        {
            var $iframe = $("