js或jquery实现页面打印

最新推荐文章于 2024-07-14 03:38:22 发布

敲代码的猫

最新推荐文章于 2024-07-14 03:38:22 发布

阅读量6.1k

点赞数 12

CC 4.0 BY-SA版权

分类专栏： JS CSS 文章标签： jquery javascript css 打印 js

本文链接：https://blog.youkuaiyun.com/LazyCode_Cat/article/details/78884680

JS 同时被 2 个专栏收录

13 篇文章

订阅专栏

CSS

12 篇文章

订阅专栏

最近一直在做页面打印相关的页面。这里分享下用css、js或jQuery实现页面打印的几种方法。

1. 使用js打印当前窗口的内容：

<input type='button' value='打印整页' onclick='javascript:window.print();' />

2. 使用js打印当前窗口的内容：

<html>
<head>
<script type="text/javascript">
function printpage()
 {
 window.print()
 }
</script>
</head>
<body>
<input type="button" value="Print this page"
onclick="printpage()" />
</body>
</html>

注：方法2和方法1原理上是一样的

3. 使用css控制局部打印：适用于只有小部分区域的内容不显示：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body >
<style media=print type=”text/css”>
    .noprint{visibility:hidden}
</style>
要打印的内容。哈哈！
<p class="noprint">将不打印的代码放在这里。</p>
<a href="javascript:window.print()" target="_self">打印</a>
</body>
</html>

注：通过css设置打印样式，需要针对打印机做专门的设置：
@media print {

}
或者引用外部样式表：

<link rel="stylesheet" media="all" href="style.css")">

只对打印有效的样式：

<link rel="stylesheet" media="print" href="print.css")">

不过如果是新建空白页的话，有可能外部链接的打印样式表不会生效，因此只能将其改为<style>写入当前页内。

4. 使用js实现局部打印：方法一

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>haorooms js局部打印案例</title>
<script type="text/javascript">   
    function doPrint() {    
        bdhtml=window.document.body.innerHTML;    
        sprnstr="<!--startprint-->";    
        eprnstr="<!--endprint-->";    
        prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);    
        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));    
        window.document.body.innerHTML=prnhtml; 
        window.print();    
}    
</script>
</head>
<body>
<p>1不需要打印的地方</p>
<p>2这里不要打印啊</p>
<!--startprint--><!--注意要加上html里star和end的这两个标记，之前没加，一直没效果，谁叫咱们菜呢~-->
<h1>打印标题</h1>
<p>打印内容~~</p>
<!--endprint-->
<button type="button" onclick="doPrint()">打印</button>
<p>1haorooms博客不打印的地方啊哈哈哈哈</p>
<p>2</p>
</body>
</html>
</html>

5. 使用js实现局部打印：方法二

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">

    //自动在打印之前执行
    window.onbeforeprint = function(){
        $("#test").hide();
    };
    //自动在打印之后执行
    window.onafterprint = function(){
        $("#test").show();
    }
</script>
<body >
<div id="test">这段文字不会被打印出来</div>
<input type="button" onclick="window.print();" value="打印本页" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div>
    打印区域内容
</div>
<script src="js/jquery.js"></script>
</body>
</html>

6. 使用js实现局部打印：方法三

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body >
<script>
    function myPrint(obj){
        var newWindow=window.open("打印窗口","_blank");//打印窗口要换成页面的url
        var docStr = obj.innerHTML;
        newWindow.document.write(docStr);
        newWindow.document.close();
        newWindow.print();
        newWindow.close();
    }
</script>
<div id="print">
    <hr />
    打印演示区域,点击打印后会在新窗口加载这里的内容！
    <hr />
</div>
<button onclick="myPrint(document.getElementById('print'))">打 印</button>
</body>
</html>

7. 通过WebBrowser组件打印：调用windows底层打印，报安全警告，不建议使用（不支持局部打印）

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <script language="javascript">
        function printsetup()
        {
            // 打印页面设置
            wb.execwb(8,1);
        }
        function printpreview(){
// 打印页面预览
            wb.execwb(7,1);
        }
        function printit()
        {
            if(confirm('确定打印吗？'))
            {
                wb.execwb(6,6)
            }
        }
    </script>
</head>
<body>
<p class="noprint">
    <OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" id="wb" name="wb" width="0"></OBJECT>
    <input type="button" name="button_print" value="打印" onclick="javascript:printit()" />
    <input type="button" name="button_setup" value="打印页面设置" onclick="javascript:printsetup();" />
    <input type="button" name="button_show" value="打印预览" onclick="javascript:printpreview();" />
</p>
</body>

注：WebBrowser是IE内置的浏览器控件，无需用户下载.
WebBrowser控件： <object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>

关于这个组件的用法，列举如下：
WebBrowser.ExecWB(1,1) 打开
Web.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口
Web.ExecWB(4,1) 保存网页
Web.ExecWB(6,1) 打印
Web.ExecWB(7,1) 打印预览
Web.ExecWB(8,1) 打印页面设置
Web.ExecWB(10,1) 查看页面属性
Web.ExecWB(15,1) 好像是撤销，有待确认
Web.ExecWB(17,1) 全选
Web.ExecWB(22,1) 刷新
Web.ExecWB(45,1) 关闭窗体无提示

8. 使用jQuery插件：jqprint()打印

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>jQuery打印插件jqprint</title>
<script language="javascript" src="jquery-1.4.4.min.js"></script>
<!-- 
如果您使用的是高版本jQuery调用下面jQuery迁移辅助插件即可
<script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>
-->
<script language="javascript" src="jquery.jqprint-0.3.js"></script>
<script language="javascript">

function aa(){
   $("#ddd").jqprint();
}
</script>
</head>

<body>
<div id="ddd">
  <table>
    <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>
    <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>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </table>
</div>
<input type="button" onclick="aa()" value="打印"/>
</body>
</html>

设置模板打印：

$("#printContainer").jqprint({
   debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
   importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
   printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
   operaSupport: true//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
});

9. 使用jQuery插件：query.PrintArea.js实现局部打印

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>index</title>
</head>
<body>
<div style="text-align:center; margin-top: 30px">
    <div id="printArea">
        <div>......文本打印区域......</div>
        <div>......文本打印区域......</div>
        <div>......文本打印区域......</div>
        <div>......文本打印区域......</div>
        <div>......文本打印区域......</div>
    </div>
    <br>
    <br>
    <input id="btnPrint" type="button" value="打印文本区域" />
    <input id="btnPrintFull" type="button" value="全屏打印" />
</div>
</body>
<script src="js/jquery.js"></script>
<script src="js/jquery.PrintArea.js"></script>
<script>
    $("#btnPrint").click(function(){
        $("#printArea").printArea();
    });

</script>
</html>

关于打印，还有以下几个需要注意的：

强制分页的代码：<div style="page-break-after: always;"></div>
大多数的浏览器会自动根据打印更改颜色，以节省打印原料，但是我们还是尽可能的手工设置一下。为了达到最佳效果，使颜色清晰明了，我们至少需要包含一下基本的打印样式：
@media print { body { color: #000; background: #fff; } }
为了保证不被跨页打印，如一个标题和内容在页面底部被分开：h2, h3 { page-break-after: avoid;}
另一种情况是要防止图片过宽而超出纸张边缘：img {max-width: 100% !important;}
第三个要点是确保 articles 文章标签的内容，在新的一页开始：article {page-break-before: always;}
还要注意列表和图片不被分开在不同的页：ul,img {page-break-inside: avoid;}