火狐打印HTML 表格,不显示的问题

最近做项目,需要一个打印HTML的功能,遇到了一系列的问题

1.火狐,谷歌显示的表格 hTML显示 样式不一样,打印出来更加的不一样,都不知道要怎么调

2.火狐打印,文字显示 , 表格线 不显示

3.用lodop插件后,可以保证打印一样,可是图片会失真

4.如果用html2canvas 把网页保存为图片然后打印,图片也会失真,看起来有点模糊

属于是饶了一大圈过来,感觉什么路都走不通

直到最后,总算是让我找一个比较好的办法了

第一步 : 表格用word画出来

然后在网上找个工具,word在线生成网页,这个生成的网页是表格的,比自己写的兼容性好很多.

我用的是网站:http://www.docpe.com/word/word-to-html.aspx

第二步:样式问题

这里需要css配合好,不然会出现的问题也多 border-collapse: unset; 兼容火狐,一般用的border-collapse: collapse; 这玩意儿不兼容火狐

还有火狐不要固定宽度 width:575pt  , 这里我卡了好长时间

再记录一个问题,360兼容模式不支持外部样式引入,只支持本地样式

table {
            
            border-collapse: unset;
            /*border: 1px solid black;*/
            border-spacing: 0;
            border-top: 1px solid black;
            border-left: 1px solid black;
            /*border-left: 1px solid black;
            border-right: 1px solid black; */
            /*border-bottom: 1px solid black; */
        }
        /**
         * 两行合并在一起,会导致出现重叠的线
         */
        td {
            border-spacing: 0;
            border-right: 1px solid black; 
            border-bottom: 1px solid black;
/*            border-top: 1px solid #999;
            border-left: 1px solid #999;
            border-right: 1px solid #999; 
            border-bottom: 1px solid #999;*/
            /*border: 1px solid black; */
            vertical-align:middle;
            background-clip: padding-box;
        }

第三步:打印工具

打印工具的选择,我就是在这里采坑了,因为我用的jqprint 打印,火狐的表格线不出来,我就直接跑去用别的方法去了,

回头来看,TMD,这狗东西有问题,具体原因不知道,在css调好后,我用windos.print() 就能显示网格线

function doPrint() {     

        //取得浏览器的userAgent字符串

            var userAgent = navigator.userAgent.toLowerCase();

            if (userAgent.indexOf("trident") > -1 || userAgent.indexOf('msie') > -1) {

                alert("请使用google或者360浏览器打印");

                return false;

            }
     

            // 打印

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

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

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

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

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

            window.document.body.innerHTML = prnhtml;
            console.info("111111");
            window.print();

            /*            window.document.body.innerHTML = bdhtml;
            console.info("22222");*/
        }  

更新下,不是jqprint的问题,是因为我用jqprint的时候没有选中用引用样式,如果需要使用引用样式,要用下来这种写法,注意 media="screen,print"

<link href="./print.css" media="screen,print" rel="stylesheet" />

    $('#new_btn_print').bind('click', function() {

                alert("jprint打印");

                //只能渲染之后才能获取页面的高度
                var o = document.getElementById("printTable");
                var h = o.offsetHeight; //高度

                var w = o.offsetWidth; //宽度
                //alert("总高度="+h+"w="+w);
                //补足高度计算方法
          /*      var addheight = addCellHeight(h,cellHeight);
                $("#addcontent0").css("height",addheight);*/
                $('#printTable').jqprint({
                   debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
                       importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
                       printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
                       operaSupport: true
                });
            });

 

打印结果

到此为止,基本算是满足需求了,剩下的就是为位置样式的调试,这玩意儿是真难调,HTML显示不一样,打印出来又一样,坑的要死