页面打印的两种方式【附代码】

页面打印

最近用到了打印页面信息的要求，网上查询资料，获知主要有两种方式：添加打印代码和借助控件实现打印，下面就来看看这两种方式。

1、 添加代码打印

添加代码打印就是在需要打印的代码出添加相应的代码实现打印的效果。主要分为三步来完成。

第一步、头部header加配置

在head头部添加打印的配置信息。根据需求修改，参考代码如下：

// 头部添加打印的信息
　<script language="javascript">
function preview(oper){  //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的打印功能
    window.document.body.innerHTML=bdhtml;
    } 
    else {
        window.print();
    }
}
</script>

第二步，确定打印区域

用startprint1和endprint1来标识位置。

// 选择需要打印的div
<!--startprint1-->   //
<!--打印内容开始-->
<div >
    ******打印代码区********
</div>
<!--打印内容结束-->
<!--endprint1-->

第三步，打印的按钮

preview(） 里面参数表示可以打印的次数，这里可以设置为1。这样可以查看页面的打印效果。

// 表示buffer不受限制
<input type=button name='button_export' value='打印'  onclick=preview(1) > //1表示只在一个区域使用

2、控件打印页面

利用jQuery的jqprint控件实现页面的打印，首先需要下载插件，地址可参考：http://www.jq22.com/jquery-info347。
　　通过以下几步操作完成打印的功能。

第一步、导入js文件

// 导入jqprint插件
<script src="/js/js/jquery.jqprint-0.3.js"></script>
//迁移辅助插件jquery-migrate
<script src="https://cdn.bootcss.com/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>

同时还需要导入jquery-migrate插件，jquery-migrate是迁移插件，有利于解决jQuery版本之间的问题，不用再修改代码。

第二步、导入css样式

需要引入两种样式，一种是页面显示的样式，一种是打印的样式，两者需要区别开来，打印样式语句里面需要添加media="print"来标识，这样就可以打印。

// 页面的显示样式
<link rel="stylesheet" href="http://localhost:8080/js/debug/lib/layer/css/style.css" type="text/css" />
//引入打印样式
<link href="printStyle.css" rel="stylesheet"type="text/css" media="print">

打印的样式设置

设置常用的四个属性： debug、 importCSS、 printContainer和operaSupport，完成不同的打印效果。

// 打印的样式
    function printStyle() {
        $('#printInfo').jqprint({  
            debug: false,//显示ifream查看效果            
            importCSS: true,   //引入原页面的样式，先找media=print        
            printContainer: true, //表示原选中对象纳入打印中   
            operaSupport: false //若支持opera浏览器，会建立临时打印选项卡     
        }); 
    }

两种方式对比

第一种页面打印方式，调用的是window自带的打印功能，生成一个新的页面，速度相对会慢一些，第二种方式直接能够弹出打印的窗口，速度比较快，交互性也比较强。

博客参考

【1】https://blog.youkuaiyun.com/lm1022/article/details/80225023
【2】https://blog.youkuaiyun.com/xuexiiphone/article/details/76855590