精华内容
下载资源
问答
  • Web打印控件,完美解决以下HTML打印难题 1.Web Html 分页打印 2.内容、图片、表格跨页断裂,封边 3.table并行、并列双边、重边 4.自动计算页码(总数及每一页),样式、位置、形式完全个性化 5.页眉页脚,去除浏览...
  • html页面实现生成数据调用打印机打印,通过后台传送json数据,前端js生成表格化样式,最后连接打印机即可
  • 用户要求,页面呈现太长时,打印的时候,要求,每页上都要有表头。找了好久,才在网上找到。原来,是要对每个表格,定义其thead,并对其样式设置成:style="display:table-header-group"。如果要求有表

    本文转载:http://www.cnblogs.com/RitchieChen/archive/2008/07/30/1256829.html

     在做项目的时候碰到的。用户要求,页面呈现太长时,打印的时候,要求,每页上都要有表头。找了好久,才在网上找到。原来,是要对每个表格,定义其thead,并对其样式设置成:style="display:table-header-group"。如果要求有表尾,也一样,要定义其tfoot,并对style="display:table-footer-group"

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <style>
    @media print{
    INPUT {display:none}
    }
    </style>
    </head>

    <body>

    <TABLE border="0" style="font-size:9pt;" width="300px" align="center">
    <THEAD style="display:table-header-group;font-weight:bold">
    <TR><TD colspan="2" align="center" style="font-weight:bold;border:3px double red">每页都有的表头</TD></TR>
    </THEAD>
    <TBODY style="text-align:center"">
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR style="page-break-after:always;"><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR style="page-break-after:always;"><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR style="page-break-after:always;"><TD>表格内容</TD><TD>表格内容</TD></TR>
    </TBODY>
    <TFOOT style="display:table-footer-group;font-weight:bold">
    <TR>
    <TD colspan="2" align="center" style="font-weight:bold;border:3px double blue">每页都有的表尾</TD>
    </TR>
    </TFOOT>
    </TABLE>
    <input type=button value=" 打 印 " οnclick=javascript:window.print()>
    </body>
    </html>


    看到的文章地址:http://www.cnblogs.com/zfanlong1314/p/3555756.html

    展开全文
  • jquery打印HTML表格自动分页

    热门讨论 2012-05-14 20:34:27
    采用JQuery实现的打印HTML表格自动按多少行分页,打印时分页
  • Html表格代码实现打印

    万次阅读 2016-09-29 16:11:08
    利用JS技术实现打印HTML表格   通常在浏览网页的时候,网页上总是出现一些和内容无关的内容,在打印的时候,要是把整个网页都打印下来,总会有些不方便。。。所以在有需要打印的网页上稍微设置一下打印页是很有...

    利用JS技术实现打印HTML表格

     

    通常在浏览网页的时候,网页上总是出现一些和内容无关的内容,在打印的时候,要是把整个网页都打印下来,总会有些不方便。。。所以在有需要打印的网页上稍微设置一下打印页是很有必要的。。。

     

    首先在head里面加入下面一段js代码:

    ---------------------------------------------

    <scriptlanguage="javascript">
    function preview(oper)
    {
    if (oper < 10){
    bdhtml=window.document.body.innerHTML;/ /获取当前页的html代码
    sprnstr="<!--startprint"+oper+"-->";/ /设置打印开始区域
    eprnstr="<!--endprint"+oper+"-->";/ /设置打印结束区域
    prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); / /从开始代码向后取html
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));/ /从结束代码向前取html
    window.document.body.innerHTML=prnhtml;
    window.print();
    window.document.body.innerHTML=bdhtml;
    } else {
    window.print();
    }
    }
    </script>

    ---------------------------------------------

    然后在所需要打印的代码,用<!--startprint1-->和<!--endprint1-->包围着,如下:

    ---------------------------------------------

    <!--startprint1-->

    <!--打印内容开始-->
    <div id=sty>
        ...

    </div>
    <!--打印内容结束-->
    <!--endprint1-->

    ---------------------------------------------

    最后加上一个打印的按钮

    <input type=buttonname='button_export' title='打印1' οnclick=preview(1) value=打印1>

    --------------------------------------------- 

    另外说明一下,在一个HTML页面里面,可以设置多个打印区域,需要改动一下的就只是几个数字就OK了。如:

    在选择第二个区域里面时用<!--startprint2--><!--endprint2-->包围着,而按钮自然也改成对应的preview(1)了。这样第二区域的打印就完成。

     

    还有一点,就是CSS样式表的问题了,打印的效果是不包含背景的打印的,设置是注意一下。<style media="print">、<linkmedia="print">的用法合理应用,media="print"是不被网页所显示的,只能在打印的效果上存在,可以设置出打印效果和在网页上所显示的不一样。

     

     

    整体代码:  

    <!DOCTYPE html>

    <html>

    <head>

        <metahttp-equiv="Content-Type"content="text/html;charset=utf-8" />

        <title></title>

        <metacharset="utf-8"/>

     

        <scriptlanguage="javascript">

            functionpreview(oper) {

                if(oper < 10) {

                    bdhtml =window.document.body.innerHTML;//获取当前页的html代码

                    sprnstr = "<!--startprint" + oper + "-->";//设置打印开始区域

                    eprnstr = "<!--endprint" + oper + "-->";//设置打印结束区域

                    prnhtml =bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html

                    prnhtml = prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html

                    window.document.body.innerHTML= prnhtml;

                    window.print();

                    window.document.body.innerHTML =bdhtml;

                } else{

                    window.print();

                }

            }

        </script>

    </head>

    <body>

        <!--startprint1-->

            fffffffffffffffffffffff

        <!--endprint1-->

        <inputtype=buttonname='button_export'title='打印1' onclick=preview(1)value=打印1>

    </body>

    </html>

    展开全文
  • html页面以及表格数据打印的实现

    千次阅读 2019-09-25 00:51:22
    1、打印表格中的数据  页面引入jquery,也可以不引入,使用jquery操作DOM对象是很方便的  这是一个简单的演示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" />...

    记录是为了更好的成长!

     

    页面打印功能很常见,总结一下:

    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"><!--startprint-->
            <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>1</td>
                        <td>张三</td>
                        <td>22</td>
                        <td>上海址</td>
                        <td>asdf</td>
                        <td>123123@11.com</td>
                        <td>123123123123123</td>
                        <td>11111111111</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>22</td>
                        <td>上海址</td>
                        <td>asdf</td>
                        <td>123123@11.com</td>
                        <td>123123123123123</td>
                        <td>11111111111</td>
                    </tr>
                </tbody>
            </table>
            <!--endprint-->
            </div>
            <iframe id="iframe1" style="display: none"></iframe>
            <button>打印</button>
        </body>
        <script type="text/javascript">
             $("button").click(function(){
                bdhtml=$("#dayin").html();
                //alert(bdhtml);
                sprnstr="<!--startprint-->";   //开始打印标识字符串有17个字符
                eprnstr="<!--endprint-->";        //结束打印标识字符串
                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>

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

    2、打印页面

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

      引入jquery,jquery不必多说,引入jquery.jqprint-0.3.js;

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

    // -----------------------------------------------------------------------
    // Eros Fratini - eros@recoding.it
    // 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 = $("<iframe  />");
            
                if (!opt.debug) { $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-600px", top: "-600px" }); }
    
                $iframe.appendTo("body");
                var doc = $iframe[0].contentWindow.document;
            }
            
            if (opt.importCSS)
            {
                if ($("link[media=print]").length > 0) 
                {
                    $("link[media=print]").each( function() {
                        doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />");
                    });
                }
                else 
                {
                    $("link").each( function() {
                        doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />");
                    });
                }
            }
            
            if (opt.printContainer) { doc.write($element.outer()); }
            else { $element.each( function() { doc.write($(this).html()); }); }
            
            doc.close();
            
            (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).focus();
            setTimeout( function() { (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).print(); if (tab) { tab.close(); } }, 1000);
        }
        
        $.fn.jqprint.defaults = {
            debug: false,
            importCSS: true, 
            printContainer: true,
            operaSupport: true
        };
    
        // Thanks to 9__, found at http://users.livejournal.com/9__/380664.html
        jQuery.fn.outer = function() {
          return $($('<div></div>').html(this.clone())).html();
        } 
    })(jQuery);

       

      完整html页面:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery打印插件jqprint</title>
    <script language="javascript" src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>
    <script language="javascript" src="js/jquery.jqprint-0.3.js"></script>
    <script language="javascript">
    function  a(){
    $("#ddd").jqprint();
    }
    
    </script>
    </head>
    <body>
    
    <div id="ddd">
    <table width="100%" border="1" cellspacing="0">
    <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    </tr>
    <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    </tr>
    </table>
    </div>
    <input type="button" onclick=" a()" value="打印"/>
    <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    </div>
    </body>
    </html>

      在浏览器中打开,可能会出现这样的错误: 

      解决方法:加入迁移辅助插件jquery-migrate-1.0.0.js可解决版本问题:http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js

    /*! jQuery Migrate v1.2.1 | (c) 2005, 2013 jQuery Foundation, Inc. and other contributors | jquery.org/license */
    jQuery.migrateMute===void 0&&(jQuery.migrateMute=!0),function(e,t,n){function r(n){var r=t.console;i[n]||(i[n]=!0,e.migrateWarnings.push(n),r&&r.warn&&!e.migrateMute&&(r.warn("JQMIGRATE: "+n),e.migrateTrace&&r.trace&&r.trace()))}function a(t,a,i,o){if(Object.defineProperty)try{return Object.defineProperty(t,a,{configurable:!0,enumerable:!0,get:function(){return r(o),i},set:function(e){r(o),i=e}}),n}catch(s){}e._definePropertyBroken=!0,t[a]=i}var i={};e.migrateWarnings=[],!e.migrateMute&&t.console&&t.console.log&&t.console.log("JQMIGRATE: Logging is active"),e.migrateTrace===n&&(e.migrateTrace=!0),e.migrateReset=function(){i={},e.migrateWarnings.length=0},"BackCompat"===document.compatMode&&r("jQuery is not compatible with Quirks Mode");var o=e("<input/>",{size:1}).attr("size")&&e.attrFn,s=e.attr,u=e.attrHooks.value&&e.attrHooks.value.get||function(){return null},c=e.attrHooks.value&&e.attrHooks.value.set||function(){return n},l=/^(?:input|button)$/i,d=/^[238]$/,p=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,f=/^(?:checked|selected)$/i;a(e,"attrFn",o||{},"jQuery.attrFn is deprecated"),e.attr=function(t,a,i,u){var c=a.toLowerCase(),g=t&&t.nodeType;return u&&(4>s.length&&r("jQuery.fn.attr( props, pass ) is deprecated"),t&&!d.test(g)&&(o?a in o:e.isFunction(e.fn[a])))?e(t)[a](i):("type"===a&&i!==n&&l.test(t.nodeName)&&t.parentNode&&r("Can't change the 'type' of an input or button in IE 6/7/8"),!e.attrHooks[c]&&p.test(c)&&(e.attrHooks[c]={get:function(t,r){var a,i=e.prop(t,r);return i===!0||"boolean"!=typeof i&&(a=t.getAttributeNode(r))&&a.nodeValue!==!1?r.toLowerCase():n},set:function(t,n,r){var a;return n===!1?e.removeAttr(t,r):(a=e.propFix[r]||r,a in t&&(t[a]=!0),t.setAttribute(r,r.toLowerCase())),r}},f.test(c)&&r("jQuery.fn.attr('"+c+"') may use property instead of attribute")),s.call(e,t,a,i))},e.attrHooks.value={get:function(e,t){var n=(e.nodeName||"").toLowerCase();return"button"===n?u.apply(this,arguments):("input"!==n&&"option"!==n&&r("jQuery.fn.attr('value') no longer gets properties"),t in e?e.value:null)},set:function(e,t){var a=(e.nodeName||"").toLowerCase();return"button"===a?c.apply(this,arguments):("input"!==a&&"option"!==a&&r("jQuery.fn.attr('value', val) no longer sets properties"),e.value=t,n)}};var g,h,v=e.fn.init,m=e.parseJSON,y=/^([^<]*)(<[\w\W]+>)([^>]*)$/;e.fn.init=function(t,n,a){var i;return t&&"string"==typeof t&&!e.isPlainObject(n)&&(i=y.exec(e.trim(t)))&&i[0]&&("<"!==t.charAt(0)&&r("$(html) HTML strings must start with '<' character"),i[3]&&r("$(html) HTML text after last tag is ignored"),"#"===i[0].charAt(0)&&(r("HTML string cannot start with a '#' character"),e.error("JQMIGRATE: Invalid selector string (XSS)")),n&&n.context&&(n=n.context),e.parseHTML)?v.call(this,e.parseHTML(i[2],n,!0),n,a):v.apply(this,arguments)},e.fn.init.prototype=e.fn,e.parseJSON=function(e){return e||null===e?m.apply(this,arguments):(r("jQuery.parseJSON requires a valid JSON string"),null)},e.uaMatch=function(e){e=e.toLowerCase();var t=/(chrome)[ \/]([\w.]+)/.exec(e)||/(webkit)[ \/]([\w.]+)/.exec(e)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(e)||/(msie) ([\w.]+)/.exec(e)||0>e.indexOf("compatible")&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(e)||[];return{browser:t[1]||"",version:t[2]||"0"}},e.browser||(g=e.uaMatch(navigator.userAgent),h={},g.browser&&(h[g.browser]=!0,h.version=g.version),h.chrome?h.webkit=!0:h.webkit&&(h.safari=!0),e.browser=h),a(e,"browser",e.browser,"jQuery.browser is deprecated"),e.sub=function(){function t(e,n){return new t.fn.init(e,n)}e.extend(!0,t,this),t.superclass=this,t.fn=t.prototype=this(),t.fn.constructor=t,t.sub=this.sub,t.fn.init=function(r,a){return a&&a instanceof e&&!(a instanceof t)&&(a=t(a)),e.fn.init.call(this,r,a,n)},t.fn.init.prototype=t.fn;var n=t(document);return r("jQuery.sub() is deprecated"),t},e.ajaxSetup({converters:{"text json":e.parseJSON}});var b=e.fn.data;e.fn.data=function(t){var a,i,o=this[0];return!o||"events"!==t||1!==arguments.length||(a=e.data(o,t),i=e._data(o,t),a!==n&&a!==i||i===n)?b.apply(this,arguments):(r("Use of jQuery.fn.data('events') is deprecated"),i)};var j=/\/(java|ecma)script/i,w=e.fn.andSelf||e.fn.addBack;e.fn.andSelf=function(){return r("jQuery.fn.andSelf() replaced by jQuery.fn.addBack()"),w.apply(this,arguments)},e.clean||(e.clean=function(t,a,i,o){a=a||document,a=!a.nodeType&&a[0]||a,a=a.ownerDocument||a,r("jQuery.clean() is deprecated");var s,u,c,l,d=[];if(e.merge(d,e.buildFragment(t,a).childNodes),i)for(c=function(e){return!e.type||j.test(e.type)?o?o.push(e.parentNode?e.parentNode.removeChild(e):e):i.appendChild(e):n},s=0;null!=(u=d[s]);s++)e.nodeName(u,"script")&&c(u)||(i.appendChild(u),u.getElementsByTagName!==n&&(l=e.grep(e.merge([],u.getElementsByTagName("script")),c),d.splice.apply(d,[s+1,0].concat(l)),s+=l.length));return d});var Q=e.event.add,x=e.event.remove,k=e.event.trigger,N=e.fn.toggle,T=e.fn.live,M=e.fn.die,S="ajaxStart|ajaxStop|ajaxSend|ajaxComplete|ajaxError|ajaxSuccess",C=RegExp("\\b(?:"+S+")\\b"),H=/(?:^|\s)hover(\.\S+|)\b/,A=function(t){return"string"!=typeof t||e.event.special.hover?t:(H.test(t)&&r("'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'"),t&&t.replace(H,"mouseenter$1 mouseleave$1"))};e.event.props&&"attrChange"!==e.event.props[0]&&e.event.props.unshift("attrChange","attrName","relatedNode","srcElement"),e.event.dispatch&&a(e.event,"handle",e.event.dispatch,"jQuery.event.handle is undocumented and deprecated"),e.event.add=function(e,t,n,a,i){e!==document&&C.test(t)&&r("AJAX events should be attached to document: "+t),Q.call(this,e,A(t||""),n,a,i)},e.event.remove=function(e,t,n,r,a){x.call(this,e,A(t)||"",n,r,a)},e.fn.error=function(){var e=Array.prototype.slice.call(arguments,0);return r("jQuery.fn.error() is deprecated"),e.splice(0,0,"error"),arguments.length?this.bind.apply(this,e):(this.triggerHandler.apply(this,e),this)},e.fn.toggle=function(t,n){if(!e.isFunction(t)||!e.isFunction(n))return N.apply(this,arguments);r("jQuery.fn.toggle(handler, handler...) is deprecated");var a=arguments,i=t.guid||e.guid++,o=0,s=function(n){var r=(e._data(this,"lastToggle"+t.guid)||0)%o;return e._data(this,"lastToggle"+t.guid,r+1),n.preventDefault(),a[r].apply(this,arguments)||!1};for(s.guid=i;a.length>o;)a[o++].guid=i;return this.click(s)},e.fn.live=function(t,n,a){return r("jQuery.fn.live() is deprecated"),T?T.apply(this,arguments):(e(this.context).on(t,this.selector,n,a),this)},e.fn.die=function(t,n){return r("jQuery.fn.die() is deprecated"),M?M.apply(this,arguments):(e(this.context).off(t,this.selector||"**",n),this)},e.event.trigger=function(e,t,n,a){return n||C.test(e)||r("Global events are undocumented and deprecated"),k.call(this,e,t,n||document,a)},e.each(S.split("|"),function(t,n){e.event.special[n]={setup:function(){var t=this;return t!==document&&(e.event.add(document,n+"."+e.guid,function(){e.event.trigger(n,null,t,!0)}),e._data(this,n,e.guid++)),!1},teardown:function(){return this!==document&&e.event.remove(document,n+"."+e._data(this,n)),!1}}})}(jQuery,window);

      至此,问题应该是解决了,页面也可以正常打印。

     

    3、强大的打印功能jatoolsPrinter

       据说很强大,不过没有用过,网上可以找到一些教程可以学习。

     

     

     

    以上内容代表个人观点,仅供参考,不喜勿喷。。。

     

    转载于:https://www.cnblogs.com/newbest/p/9974489.html

    展开全文
  • 本文实例为大家分享了js实现打印表格的具体代码,供大家参考,具体内容如下 效果如下: 代码如下: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>打印表格&...
  • Html细线表格的实现 打印边框设置

    千次阅读 2014-09-30 10:49:52
    在网页制作中,我们常常会使用到表格表格使得需要表达的信息更清楚,明了。    1.1  1.2      2.1  2.2   这段代码定义了border = 1pix的表格,但实际上表格的实际边框宽度为2pix, 这是...
    在网页制作中,我们常常会使用到表格,表格使得需要表达的信息更清楚,明了。

    <table border="1" cellspacing="0" bordercolor="#000000" width = "80%">
         <tr>
             <td>1.1</td>
             <td>1.2</td>
         </tr>
         <tr>
             <td>2.1</td>
             <td>2.2</td>
         </tr>
    < table>

    这段代码定义了border = 1pix的表格,但实际上表格的实际边框宽度为2pix, 这是因为表格边框由:表格外边框和单元格边框两部分构成。
    那么如何定义一个细线表格(实际边宽为1pix) 呢?

    1. 使用 cellspacing和背景色技术:
    < table border="0" cellspacing="1" bgcolor="#000000" width = "80%">
         <tr bgcolor="#ffffff">
             <td>1.1</td>
             <td>1.2</td>
         </tr>
         <tr bgcolor="#ffffff">
             <td>2.1</td>
             <td>2.2</td>
         </tr>
    < table>

    2.使用border-collapse属性:
    < table border="1" cellspacing="0" bordercolor="#000000" width = "80%" style="border-collapse:collapse;">
         <tr>
             <td>1.1</td>
             <td>1.2</td>
         </tr>
         <tr>
             <td>2.1</td>
             <td>2.2</td>
         </tr>
    < table>

    提醒: 对于通过方法1制作出来的细线表格,在打印时可能会出现表格边框打印不出来的问题。 而方法2就没有这个问题,推荐使用。
    展开全文
  • c#asp.net表格Html数据模板转换Pdf文件web打印pdf报表dll
  • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test table { page-break-inside:auto } tr { page-break-inside:avoid; page-break-after:auto } thead { display:table-header-...
  • 1.Web html 分页打印; 2.内容、图片、表格跨页断裂,封边; 3.table并行、并列双边、重边; 4.自动计算页码(总数及每一页),样式、位置、形式完全个性化; 5.页眉页脚,去除浏览默认,自定义内容、样式、位置; 6...
  • 打印 发票 表格实现

    2019-04-19 14:48:04
    基于angular的打印 发票 table html
  • html表格及传统布局

    千次阅读 2018-04-19 22:00:54
    html表格 table常用标签 1、table标签:声明一个表格 2、tr标签:定义表格中的一行 3、td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格 table常用属性: 1、border 定义表格的边框 ...
  • 以及记录一下在vue里面如何让浏览器弹出打印打印这个表格table(一个在git上发现的好用的打印插件,不用install进项目,直接存一个js文件就能用,简单好用的vue打印插件)。下面代码粘贴出来另存为html文件就能...
  • 最近给客户做打印的时候,客户提出打印时不要打印该页面的头,只是打印表格里面的内容,因为头部有背景和打印按钮,而且要细线表格的那种,我想细线表格不是很简单吗 如果你还不知道细线表格怎么做,请看下面的代码...
  • 原始表单 ,需要打印在浏览器上打印该表单 出以下效果 原因:是因为当表被复制到一个新窗口时,您的CSS不被保留。你可以通过将一些相关的CSS传递到document.write()方法中的新窗口来解决这个问题。您还需要...
  • WEB应用的页面,表格的表现形式是常常遇到的,在列数有限的前提下,如何将各列中的内容自适应到不同分辨率的屏幕,这应该是一个比较容易遇到的问题,下面就来谈一谈我对这类问题的解决与看法。 将所有列设置为固定...
  • Android端操作读取excel表格内容生成html5并提交到打印机,要求必须适配A4纸的大小,并且打印出来的内容每页必须有固定的表头和表尾。
  • 上图就是打印的效果,但表格的样式没有出来,在vue-cli脚手架里样式是起作用的。 这个打印是用的原生javascript的方法实现的,但引用了vue.js和element 代码如下: <!DOCTYPE html> <html> <...
  • 6行代码实现js打印表格

    千次阅读 2019-03-05 11:06:04
    在业务中我们经常会遇到打印当前表格的需求,下面我们直奔主题。 首先我们要引一个js文件: &lt;script type="text/javascript" src="Js/jquery.jqprint-0.3.js"&gt;&lt;/script...
  • html页面中打印样式

    千次阅读 2019-06-16 06:26:13
    2019独角兽企业重金招聘Python工程师标准>>> 在head中添加样式: ... 这样的话,打印时,就不会将这个按钮打印出来。 转载于:https://my.oschina.net/u/2552902/blog/543972
  • html 表格溢出解决办法

    千次阅读 2014-08-25 17:22:29
    表格如果比较宽,则有可能
  • 通过把整个Html传到后台通过POI来解析生成 问题:表格没有,图片无法显示,还需要把doc手动改为docx 2.前台通过wordexport.js实现导出word 问题: 表格样式很难看,看JS源码无法找到更改的地方,无法保存到...
  • element ui 打印 表格

    千次阅读 2019-09-30 16:30:25
    https://libing.art/2019/05/29/vue-dao-chu-excel-biao-ge/ 转载于:https://www.cnblogs.com/wxqworld/p/11565546.html
  • LODOP 打印图片和表格

    千次阅读 2020-10-16 14:15:04
    一开始在官网找了好久,发现没有图片和表格一起打印的,就自己去试试 领导给我的是一个excel,里面放了大概是这样的 当然图片不是这个,为了隐私问题,特意找了自己的账号截图 思路: 1.我没有去找相关找打印excel...
  • 代码 页面效果
  • Js实现简单的打印表格

    千次阅读 2018-12-13 18:58:13
    效果如下: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;...打印表格&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
  • 十九、Qt之调用打印机打印表格

    千次阅读 热门讨论 2020-03-22 21:06:00
    //表格开始 html.append(");//标题占一行,居中显示if(.length()>0){.append(QString(");}//副标题占一行,左对齐显示if(.length()>0){.append(QString(");}//循环写入字段名,字段名占一行,居中显示if(>0){.append(")...
  • 需要自己写打印程序时,会遇到打印分页都需有表头表尾的问题,html打印分页自带表头表尾,可以参考学习下
  • table表格打印样式

    千次阅读 2019-05-23 11:22:00
    border= “1”:给整个表格(包括表格及每一个单元格)加上1像素的黑色边框, 其等同于css中的:table,table tr th, table tr td { border:1px solid #0094ff; } cellpadding=“0”:单元格边距等于0,其默认值...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,543
精华内容 25,417
关键字:

html打印表格