JS实现浏览器打印、打印预览示例

最新推荐文章于 2023-05-27 20:40:56 发布

Trouble-Solver

最新推荐文章于 2023-05-27 20:40:56 发布

阅读量721

点赞数

本文链接：https://blog.csdn.net/syq8023/article/details/93118650

版权

1.JS实现打印的方式

方式一：window.print()

window.print();会弹出打印对话框，打印的是window.document.body.innerHTML中的内容，下面是从网上摘到的一个局部打印的例子，该例子的不足是打印会修改页面的内容。

<!DOCTYPE html>

<html>

<head>

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

<title>局部打印案例</title>

<script type="text/javascript">  

  functiondoPrint() {  

    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>不打印的地方啊哈哈哈哈</p>

        <p>2</p>

    </body>

</html>

方式二：使用html 标签<object>引入Webbrowser控件

这种方式是其只兼容IE，其他浏览器不可使用，同时IE10以下的浏览器才可以使用，调用方式如下：

<body>

  <object id="WebBrowser"classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0"width="0"></object>

</body>

<script>

  WebBrowser.ExecWB(1,1) //打开 

  WebBrowser.ExecWB(2,1) //关闭现在所有的IE窗口，并打开一个新窗口 

  WebBrowser.ExecWB(4,1) //保存网页

  //--------------- 常用 ---------------  

  WebBrowser.ExecWB(6,1) //打印 

  WebBrowser.ExecWB(7,1) //打印预览 

  WebBrowser.ExecWB(8,1) //打印页面设置 

  //------------------------------------- 

  WebBrowser.ExecWB(10,1) //查看页面属性 

  WebBrowser.ExecWB(15,1) //撤销 

  WebBrowser.ExecWB(17,1) //全选 

  WebBrowser.ExecWB(22,1) //刷新 

  WebBrowser.ExecWB(45,1) //关闭窗体无提示

</script>

这种方式优势是在IE下可以弹出打印预览，这是打印很人性化的功能，但是遗憾的是高版本的IE浏览器不支持WebBrowser了

方式三：采用document.execCommand(”print”)

该方式也兼容各个版本的浏览器，同window.print()一样，其启动的是打印对话框，chrome的打印对话框自带预览功能，但是IE、火狐仅仅只弹出打印设置对话框，没有预览功能。

方式四：采用JQuery插件

使用jQuery浏览插件可以很方便的进行局部打印，常用的插件有：

1)jquery.print.js 下载地址：https://github.com/DoersGuild/jQuery.print

2)jquery.print-preview.js 下载地址：https://github.com/etimbo/jquery-print-preview-plugin