2017年08月18日网页开发过程中会有打印页面的需求

2017年08月18日网页开发过程中会有打印页面的需求

　　JS实现页面打印（全部，部分）

　　更新时间：2017年8月18日10:08:16作者：Xiaoguoguo_G

　　本文文章主要介绍JS实现页面打印（全部，部分），我认为它相当不错，现在与您分享，也供您参考。让我们跟随编辑器看看

　　在Web开发过程中，我们经常需要打印页面。有很多方法可以通过JS实现。我在这里整理了一下，供您参考。

　　方法1：window.print（）

　　整体打印

打印

　　现在可以轻松打印页面，但是此方法将打印整个页面。如果要打印指定区域，则需要通过以下设置

　　部分打印

　　首先，在html中，用星号和结尾标记打印区域

这块内容不需要打印

这里是需要打印的内容

.....

这块内容不需要打印

　　然后，将以下代码添加到click事件中

function doPrint() {

bdhtml=window.document.body.innerHTML;

sprnstr="";

eprnstr="";

prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);

prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));

window.document.body.innerHTML=prnhtml;

window.print();

}

　　过滤打印区域的内容

　　例如

预览

打印

这里是需要打印的内容

.....

　　上面的预览和打印按钮不想打印，如果要过滤，可以进行以下样式设置

@media print {

.noprint{

display: none;

}

}

　　或

.noprint{

display: none;

}

　　选择两种书写方式之一

　　分页打印

　　使用window.print（）打印时，如果内容超出限制，它将自动分页。但是，如果需要自定义分页范围，例如表格的页面打印，则可以设置以下内容：

　　方法二、 jqprint（）

　　jqprint是一个用于基于jQuery的页面打印的小插件，但是我不得不承认这个插件确实功能强大。在最近的项目中，我提供了很多帮助。在Web打印方面，前端打印基本上取决于窗口。 .print（）方法进行打印，并在此基础上对该插件进行进一步封装，从而可以轻松地在网页上打印某个区域，这是一个亮点。

　　参考网址：

　　请注意！许多朋友遇到无法读取未定义错误的属性“ opera”。问题是juqery版本兼容性问题。

　　解决方案：添加迁移辅助插件jquery-migrate- 1. 0. 0. js解决版本问题

　　简介

　　js

function a(){

$("#ddd").jqprint();

}

　　html

test

test

test

test

test

　　设置模板打印

$("#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

});

　　后记

　　此外，您还可以使用html标签来引入Webbrowser控件（仅与IE兼容）或调用Windows的底层以进行打印，并报告安全警告。不建议使用（不支持部分打印）

　　我在这里只介绍两种方法。我希望它对每个人的学习都有帮助，也希望您能更多地支持Scripthome。