用js实现页面打印以及自定义打印内容

实现一：

<input type="button" value="打印" onClick="document.execCommand('print')"/>
<!--将不需要打印的部分，标记为 class="noprint" -->
<style type="text/css" media=print>
.noprint{display : none }
</style>
<p class="noprint">不需要打印的地方</p>
<p>打印的部分</p>

实现二：WebBrowser控件

<object id="WebBrowser" width=0 height=0
classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object>
<input type="button" value="打印" onClick="WebBrowser.ExecWB(8,1)"/>

实现三：windows自带的打印对象

<input type="button" value="打印"onClick="window.print()"/>

实现四：jQuery实现--支持局部打印

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.PrintArea.js"></script>
<script>
$(document).ready(function(){
$("input#button").click(function(){
$("div#PrintArea").printArea();
});
});</script>
<input id="button" type="button" value="打印"/>
<div id="PrintArea">文本打印部分</div>

===================下面为jquery.PrintArea.js插件的js源码===================

(function ($) {var printAreaCount = 0;$.fn.printArea = function () {var ele = $(this);var idPrefix = "printArea_";removePrintArea(idPrefix + printAreaCount);printAreaCount++;var iframeId = idPrefix + printAreaCount;var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';iframe = document.createElement('IFRAME');$(iframe).attr({style: iframeStyle,id: iframeId});document.body.appendChild(iframe);var doc = iframe.contentWindow.document;$(document).find("link").filter(function () {return $(this).attr("rel").toLowerCase() == "stylesheet";}).each(function () {doc.write('<link type="text/css" rel="stylesheet" href="'+ $(this).attr("href") + '" >');});doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html()+ '</div>');doc.close();var frameWindow = iframe.contentWindow;frameWindow.close();frameWindow.focus();frameWindow.print();}var removePrintArea = function (id) {$("iframe#" + id).remove();};
})(jQuery);

用js实现页面打印以及自定义打印内容相关推荐

[html] 打印页面时怎样自定义打印页眉页脚或者去掉眉页脚？
[html] 打印页面时怎样自定义打印页眉页脚或者去掉眉页脚? <style type="text/css" media="print"> @pag ...
使用Vue @media print在JavaScript中插入不同尺寸的打印页面，可自定义尺寸大小和打印机配置
本文介绍了如何在Vue项目中使用@media print和JavaScript来插入不同尺寸的打印页面,并提供了代码编写.使用教程.注意事项和避坑点,最后进行了总结. 一.介绍在开发Web应用程序时 ...
js 页面打印，兼容单个打印和分页批量打印，自定义页眉和简单页脚
场景: 最近在公司做开发,有个需求需要页面打印功能,作为前端半桶水都不到,只会改页面的我,一脸懵逼,公司里也没人系统的做过,按照惯例,本着有事找度娘的心态(我一直认为我们现在遇到的70%-80%的问题 ...
js调用打印，并且将页面缩放后进行打印，同时可自定义分页打印demo
话不多说,直接上demo,注释备注相当清晰 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
layui js 自定义打印功能实现
打印功能的实现往往是新建一个页面,然后在新建页面中画出你想要的效果,然后调用浏览器的打印功能进行打印项目依赖: layui jquery 记得换layui和jquery引入路径完整项目代码: &l ...
用js在控制台打印html页面,vue 使用print-js 打印html页面
Print.js 官网官网优点:可以打印多种格式的内容(pdf.json.html等) 打印json时可以添加表头.打印html页时可以继承原有页面的样式,局部打印,过滤掉要打印的元素,及其方便. ...
js一键批量打印_web页面的单页打印以及批量打印实现方法
本文主要和大家分享web页面的单页打印以及批量打印实现方法,希望能帮助到大家. 打印事件:window.print() 1.单页打印(布局打印):function printCnt(){ //1.获取 ...
Jquery、Js实现网页打印，及打印样式的自定义
本来今天准备继续更新webpack的内容的,但是上午修改了一下公司网站的代码,然后就开始研究网页打印的东西了,弄了一下午,搞的整个人都不好了.刚好也来讲一下一些收获,其实也不算什么收获,但是还是来跟大 ...
JS怎么实现页面打印 JS实现页面打印的方法
JS实现页面打印 1.js实现(可实现局部打印) [html] <input id="btnPrint" type="button" value=&quo ...

用js实现页面打印以及自定义打印内容

用js实现页面打印以及自定义打印内容相关推荐

最新文章

热门文章