https://blog.csdn.net/lfsf802/article/details/41621741

 

 

在工作中出现web打印的情况是非常多的,其实这也是一个比较烦人的问题,这篇博客整理一下关于Web打印的一些方法或者方式。

 

1. window.print()

这个方法是用来打印网页的,页面上的其他的元素也会被打印处理,在打印的时候页眉页脚是不太好控制的。

所以如果使用这种方法的话最好将结果放到两个注释中间,之后通过JS来实现打印区域的功能。

  1. 具体做法:
  2. <!–startprint–>
  3. <div align=“center”>
  4. <!–省略部分代码–>
  5. </div>
  6. <!–endprint–>
  7. bdhtml=window.document.body.innerHTML;
  8. sprnstr=”<!–startprint–>“;
  9. eprnstr=”<!–endprint–>“;
  10. prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
  11. prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
  12. window.document.body.innerHTML=prnhtml;
  13. window.print();

 

 

特别注意:使用window.print方法是不能够打印IE浏览器中的移动或者旋转的动画的,但是在非IE浏览器中是可以支持的。

2. DLPrinter控件

DLPrinter打印控件完全免费,界面大方、使用简单、但无签名,支持打印预览、直接打印,可设置页眉、页脚、页边距、打印份数、纸张大小等信息。

这个控件的下载地址为:http://files.cnblogs.com/panshenglu/DLPrinter.rar

调用方法:

  1. <OBJECT ID=“DLPrinter” CLASSID=“CLSID:5C230622-45E5-4e3c-893C-3BFDDC4DB5E4” codebase=“DLPrinter.cab” height=“0” width=“0” ></OBJECT>
  2. <script>
  3. DLPrinter.MarginLeft=20;
  4. DLPrinter.MarginRight=20;
  5. DLPrinter.MarginTop=20;
  6. DLPrinter.MarginBottom=20;
  7. DLPrinter.CopyCount=2;
  8. DLPrinter.PageHeader=“这是测试的页眉”;
  9. DLPrinter.PageFooter=“这是测试的页脚”;
  10. DLPrinter.IsLandScape=1;
  11. DLPrinter.ContentURL=“www.baidu.com”;
  12. </script>
  13. <input type=“button” id=“btnPrint” value=“Print Preview” onclick=“DLPrinter.PrintPreview()” />
  14. <input type=“button” id=“btnPrint” value=“Print with prompt” onclick=“DLPrinter.Print()” />
  15. <input type=“button” id=“btnPrint” value=“Print without prompt” onclick=“DLPrinter.PrintDirect()” />

 

3. Lodop

对于这个打印控件,用一个词来形容:强大!不仅调用方便,而且功能比你想像中要强大得多。强烈推荐使用。

下载地址:http://www.lodop.net/

推荐去官网中的功能演示来学习一下这个打印空间。

4. Jquery打印

下面一个是用Jquery框架写的一个web打印控件的功能。

代码如下:

  1. (function ($) {
  2. var printAreaCount = 0;
  3. $.fn.printArea = function () {
  4. var ele = $(this);
  5. var idPrefix = “printArea_”;
  6. removePrintArea(idPrefix + printAreaCount);
  7. printAreaCount++;
  8. var iframeId = idPrefix + printAreaCount;
  9. var iframeStyle = ‘position:absolute;width:0px;height:0px;left:-500px;top:-500px;’;
  10. iframe = document.createElement(‘IFRAME’);
  11. $(iframe).attr({
  12. style: iframeStyle,
  13. id: iframeId
  14. });
  15. document.body.appendChild(iframe);
  16. var doc = iframe.contentWindow.document;
  17. $(document).find(“link”).filter(function () {
  18. return $(this).attr(“rel”).toLowerCase() == “stylesheet”;
  19. }).each(
  20. function () {
  21. doc.write(‘<link type=“text/css” rel=“stylesheet” href=“‘
  22. + $(this).attr(“href“) + ‘” >’);
  23. });
  24. doc.write(‘<div class=“‘ + $(ele).attr(“class“) + ‘”>‘ + $(ele).html()
  25. + ‘</div>‘);
  26. doc.close();
  27. var frameWindow = iframe.contentWindow;
  28. frameWindow.close();
  29. frameWindow.focus();
  30. frameWindow.print();
  31. }
  32. var removePrintArea = function (id) {
  33. $(“iframe#” + id).remove();
  34. };
  35. })(jQuery);
  36. <input type=“button” id=“btnPrint” value=“打印”/>
  37. <div id=“printContent”>要打印的内容区域<div>
  38. <script type=“text/javascript”>
  39. $(function(){
  40. $(“#btnPrint”).click(function(){ $(“#printContent”).printArea(); });
  41. });
  42. </script>

 

 

其实关于打印控件还有很多,找到自己最合适的才是硬道理,如果还有更多的web打印实现方法,可以给我留言。

——————— 本文来自 lfsf802 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/lfsf802/article/details/41621741?utm_source=copy

发表评论

电子邮件地址不会被公开。