js打印功能案例及实现

最新推荐文章于 2021-09-10 13:50:58 发布

高彩琼

最新推荐文章于 2021-09-10 13:50:58 发布

阅读量721

点赞数 1

分类专栏：项目经验汇总

本文链接：https://blog.csdn.net/qq_41573640/article/details/102989133

版权

项目经验汇总专栏收录该内容

36 篇文章 2 订阅

订阅专栏

建议：
1、不需修改的页面可以用当前页局部打印。

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datagrid-打印</title>
    <link rel="stylesheet" href="css/commonCss.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/easyui.css">
    <link rel="stylesheet" href="css/treeHight.css">
    <link href="css/font/iconfont.css" rel="stylesheet">
    <style>
        .layout,.panel-fit, .panel-fit body{
            overflow: auto;
        }
        .datagrid-body{
            padding-bottom: 50px !important;
        }
    </style>
</head>
<body>
<p><button οnclick="doPrint3();">打印</button></p>
<!--startprint-->
<div id="jxcon">
    <div id="dg"></div>
    <div style="height: 30px;"></div>


</div>
<!--endprint-->
<p><button οnclick="doPrint3();">打印</button></p>
<script src="commonJs/jquery-1.11.2.min.js"></script>
<script src="commonJs/jquery.easyui.min.js"></script>
<script src="commonJs/common.js"></script>
<script src="js/treeHight.js"></script>
<script src="js/editDatagrid.js"></script>
<script src="js/treeindex.js"></script>
<script>
    var index1;
    $('#dg').datagrid({
        iconCls: 'icon-edit',
        singleSelect: true,
        toolbar: '#tb',
        method: 'get',
        url:'json/editDatagrid.json',
        columns:[[
            {field:'itemid',width:80},
            {field:'productid',width:100,
                formatter:function(value,row){
                    return row.productname;
                },
                editor:{
                    type:'combobox',
                    options:{
                        valueField:'productid',
                        textField:'productname',
                        method:'get',
                        data:[
                            {'productid':'FI-SW-01','productname':'Koi'},
                            {'productid':'K9-DL-01','productname':'Dalmation'},
                            {'productid':'RP-SN-01','productname':'Rattlesnake'},
                            {'productid':'RP-LI-02','productname':'Iguana'},
                            {'productid':'FL-DSH-01','productname':'Manx'},
                            {'productid':'FL-DLH-02','productname':'Persian'},
                            {'productid':'AV-CB-01','productname':'Amazon Parrot'}
                        ] ,
                        required:true
                    }
                }
            },
            {field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},
            {field:'unitcost',width:80,align:'right',editor:'numberbox'},
            {field:'attr1',width:250,editor:'textbox'},
            {field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}},
            {field:'opt',title:'操作', width:60,align:'center',
                formatter:function(value,row){
                    return "<span class='add'>增加</span><span class='del'>删除</span>";
                },}
        ]],
        onLoadSuccess:function(data){
            var merges = [{
                index: 2,
                rowspan: 2
            },{
                index: 5,
                rowspan: 2
            },{
                index: 7,
                rowspan: 2
            }];
            for(var i=0; i<merges.length; i++){
                $(this).datagrid('mergeCells',{
                    index: merges[i].index,
                    field: 'itemid',
                    rowspan: merges[i].rowspan
                });
            }
        },
        // onClickRow:onClickRow,
        onClickCell:function(index, field, value){
            index1=index+1;
            console.log(index,field,value);
        }
    });
    $("#jxcon").on("click",'span',function(e){
        if($(e.target).hasClass('add')){
        $('#dg').datagrid('insertRow',{
            index: index1, // 索引从0开始
            row: {
                itemid: ' ',
                productid: 30,
                listprice: ' ',
                unitcost: ' ',
                attr1: ' ',
                status: ' ',
            }
        });
        }else{
            $('#dg').datagrid('deleteRow',index1-1);
        };

    });

</script>
<script>
    function doPrint3(){
        // 结束编辑
        $('#dg').datagrid('endEdit', editIndex);
        // 隐藏操作列
        $('#dg').datagrid('hideColumn', 'opt');
        bdhtml=window.document.body.innerHTML; //获取当前页的html代码   
        sprnstr="<!--startprint-->"; //设置打印开始区域    
        eprnstr="<!--endprint-->"; //设置打印结束区域 
        prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html    
        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //从结束代码向前取html    
        window.document.body.innerHTML=prnhtml;   //将html代码 放在页面上，方便打印
        //打印之前设置IE打印时不打印页眉 、页脚
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
            remove_ie_header_and_footer();
        }
        print.portrait   =  false    ;//横向打印
        //打印
        window.print();
        window.document.body.innerHTML=bdhtml; //打印完成后将html代码还原

    };
    //打印之前设置IE打印时不打印页眉 、页脚
    function remove_ie_header_and_footer() {
        var hkey_root, hkey_path, hkey_key;
        hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
        try {
            var RegWsh = new ActiveXObject("WScript.Shell");
            RegWsh.RegWrite(hkey_path + "header", "");          //设置页眉为空
            RegWsh.RegWrite(hkey_path + "footer", ""); //设置页脚为空
        } catch (e) {}
    }
</script>
</body>
</html>

2、涉及编辑功能的用iframe嵌套，打印子页面内容；

主要js

function doPrint(){
    //判断iframe是否存在，不存在则创建iframe
    var iframe=document.getElementById("printIframe");
    // var iframe2=document.getElementById("print-iframe");
    if(!iframe){
        var el = document.getElementById("printcontent");
        iframe = document.createElement('IFRAME');
        var doc = null;
        iframe.setAttribute("id", "print-iframe");
        iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
        document.body.appendChild(iframe);
        doc = iframe.contentWindow.document;
        //这里可以自定义样式
        //doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
        doc.write('<div>' + el.innerHTML + '</div>');
        doc.close();
        iframe.contentWindow.focus();
    }
    // 打印前操作
    //结束行编辑
    $("#printIframe")[0].contentWindow.endEditCell();
    // 页面缩放，此处缩放为50%，不缩放的话页面超出就打印不出来，这个需要自己调试，看自己
    iframe.style.zoom=0.5;
    iframe.contentWindow.print();
    //打印完后的操作
    //页面回复原比例大小
    iframe.style.zoom=1;
    $("#printIframe")[0].contentWindow.endPrint();
    if (navigator.userAgent.indexOf("MSIE") > 0){
        document.body.removeChild(iframe);
    }

}

高彩琼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
js打印功能案例及实现

建议：1、不需修改的页面可以用当前页局部打印。案例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>datagrid-打印</title> <link rel="stylesheet" hr...
复制链接

扫一扫