js打印功能案例及实现

朱雀 2021-01-19 14:46 687阅读 0赞

建议：  
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>
    
    <div id="jxcon">
        <div id="dg"></div>
        <div style="height: 30px;"></div>
    
    
    </div>
    
    <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=""; //设置打印开始区域    
            eprnstr=""; //设置打印结束区域 
            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