html局部打印】的更多相关文章

html页面局部打印的小栗子 只要修改点击打印的按钮和打印的div区域的id就行啦 <!DOCTYPE html> <html> <head> <title>print test page</title> <meta charset="utf-8"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">…
局部打印插件 jquery.PrintArea.js js代码 (function ($) {     var printAreaCount = 0;     $.fn.printArea = function () {         var ele = $(this);         var idPrefix = "printArea_";         removePrintArea(idPrefix + printAreaCount);         printAreaC…
1.js实现(可实现局部打印) <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" /> <input id="btnPrint" type="button" value="打印预览" onclick=preview(1) /> &…
最近开发过程中遇到了js局部打印的功能,在网上找相关的资料,最终找到了juery.jqprint-0.3.js 和jquery.PrintArea.js两种. 最初使用的是jquery.jqprint-0.3.js,是在弹窗的情况下使用,即使出现滚动条也依然能够把所有内容成功打印出来.但是如果在当前页面div中出现滚动条(div内容过多,出现垂直滚动条)的话,则内容打印不全.所以最终选择的的是jquery.PrintArea.js.这是我现在发现的最明显的区别. 这两个都是打印指定div内的显示…
项目中遇到了做局部打印的情况,最开始用的bootstrap,可是实际显示的和打印的效果就不一样了,于是就只能换一种方式了. 打印是用的jqprint 这个插件,很简单好用的插件. 引入两个js就可以了 <script type="text/javascript" src="/js/appjs/common/print/jquery-1.4.4.min.js"></script> <script type="text/javas…
基于jquery库的jquery.PrintArea.js插件源代码为: (function ($) { var printAreaCount = 0; $.fn.printArea = function () { var ele = $(this); var idPrefix = "printArea_"; removePrintArea(idPrefix + printAreaCount); printAreaCount++; var iframeId = idPrefix + p…
首先定义css样式:  复制代码代码如下: @media print { .noprint { display: none;color:green } }  对于不想打印的内容只用在标签中加上 class="noprint"即可,打印的时候客户也不会看到页面任何变化. 打印时调用 window.print(); 另外几种js局部打印的方法: 移花接木: 打印的时候,把需要打印的内容替换成整个body内容(用户会在打印的时候看到变化,客户体验不太好) 复制代码代码如下: function…
1 局部打印方法: 作用:将id为dayin的内容,新建页面并打印,可解决打印某页面中的部分内容的问题.使用方法:将要打印的内容通过 <span id="dayin"></span>包含起来,然后在某个按扭中定义事件<input type="button" onclick="dayin()" value="打印">function dayin() { var code="<b…
方法一:直接用js的打印方法 <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" />  方法二:引用jquery插件打印(可以打印整个网页内容和网页的局部内容) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&q…
window.print()方法是打印整个body,若想打印局部区域,网上出现了各种解决办法,我觉得都挺好的.我最推荐jquery.PrintArea.js插件形式 点击上述链接首先下载下来,我的是版本2.4.0 将jquery.PrintArea.js引入到项目中,需要打印的页面引用该js和jQuery.js 打印关键代码如下: $("#目标区域id").printArea();…
首先准备要打印的内容,也可以打印时再填充,html中定义如下: <!--startprint--> <div id="printcontent" style="display:none"> ${printContentBody} </div> <!--endprint--> 方法一: 通过开始.结束标记(startprint.endprint)来打印 function doPrint() { bdhtml=window…
(function ($) { var printAreaCount = 0; $.fn.printArea = function () { var ele = $(this); var idPrefix = "printArea_"; removePrintArea(idPrefix + printAreaCount); printAreaCount++; var iframeId = idPrefix + printAreaCount; var iframeStyle = 'pos…
所有浏览器都可以 <html> <head title=""> <title>测试打印</title> <style media="print"> /*只应用于打印的样式*/ .noprint { display: none; } </style> <script> //通过标签控制 function printDiv1(oper) { bdhtml = window.documen…
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPrint.aspx.cs" Inherits="WebPrint" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT…
/* @license * jQuery.print, version 1.5.1 * (c) Sathvik Ponangi, Doers' Guild * Licence: CC-By (http://creativecommons.org/licenses/by/3.0/) *--------------------------------------------------------------------------*/ (function ($) { "use strict&quo…
function printme() { //printMain为要打印的dom元素 window.document.body.innerHTML = document.getElementById('printMain').innerHTML; window.print(); // 还原界面 var bdhtml = window.document.body.innerHTML; window.document.body.innerHTML = bdhtml; window.location.…
1.当前页面 var bodyHtml = window.document.body.innerHTML; window.document.body.innerHTML = printHtml;//printHtml为当前需要打印的div的内容 window.print(); window.document.body.innerHTML = bodyHtml; 缺点: (1)移除页面内容再插入需要打印页面内容,页面会有一个大的跳动 (2)页面事件效果会丢失 2.iframe 打印 functio…
首先有个调用的方法.printView(). function printView() { bdhtml = window.document.body.innerHTML;//获取当前页的html代码 window.document.body.innerHTML = bdhtml; sprnstr = "<!--startprint-->";//设置打印开始区域 eprnstr = "<!--endprint-->";//设置打印结束区域 p…
// 打印初审收费清单     getOrderCostBille(){       var head_str = "<html><head><title></title></head><body>"; //先生成头部       var foot_str = "</body></html>"; //生成尾部       var older = document.body…
const handleOk = () =>{ let ele = document.getElementById('printInfor'); let iframe=window.frames['myPrint']; iframe.document.open(); console.log(iframe); console.log(document.getElementById('myPrint')); document.getElementById('myPrint').contentWind…
原文出自:http://www.haorooms.com/post/css3media 在网页中经常看到有打印功能,点击之后,只针对特定区域进行的打印.网上看了一下,大体上有2中实现方法,一种是用css @media控制,另一种是直接用js控制.下面分别来对其进行说明一下! 一.css控制网页局部打印 关于css控制打印,css @media 参考地址:http://www.haorooms.com/post/css3media(主要是介绍Media Query方法)也引进了css2的media…
项目中,需要对页面的部分div进行打印,为了保证界面布局不乱,采取了新建iframe的方法. 将需要打印的div放到iframe中,然后调用iframe进行打印,就可以很好的实现局部打印的效果了. 同时兼容性还很好,以下是我实现的代码,前端小鸟,大神有指点的,请留言赐教哈,提前感谢! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t…
1.局部打印函数. function preview(oper) { if (oper < 10) { bdhtml=window.document.body.innerHTML;//获取当前页的html代码 sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域 eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域 prn…
[原文链接] 1.js实现(可实现局部打印) <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" /> <input id="btnPrint" type="button" value="打印预览" onclick=preview(1)…
很多时候,我们在做系统的时候要做打印功能,打印在js中其实很简单,不过这个很简单的代码并不能满足我们的特定需求,比如我们需要打印的表单在很多文字的中间,或者文字中包含一些广告或者图片什么的,这就很难用:window.print():这时,我们就要分区域的打印,将需要打印的内容提取出来让打印机知道,而不是一股脑的全部打印! 下面是两种实现的方法: 第一种:区域划分法.将要打印的部分用特殊的字符标记起来进行打印.这样下来还是有页眉和页脚,可以写去页眉页脚的方法放进去.JS 实现简单的页面局部打印 1…
前段时间做web项目用到了页面打印,在网上找了些资料,自己也试了很多方法,将这些方案列出下: 1.window.print()方法打印,所有主要浏览器都支持 print() 方法 这个方法很实用,只需要调用方法就可以打印,但是这是打印整个html,要想打印局部的话,要另做. 2.想要局部打印,通过jQuery插件就可以实现,现在网上有很多这样的插件,比如jqprint插件等等,可以非常方便的打印一个div,而且不会影响其他的.ie和谷歌是没问题的,其他没仔细测过. 3.想要局部打印,也可以通过一…
<div id="print">打印的内容</div><a href="javascript:void(0)" onclick="printView('print');">打印</a> 实现打印的JS函数://局部打印function printView(id){ var sprnhtml = $(id).outerHTML; var selfhtml = window.document.body.…
jquery.jqprint-0.3.js JQuery提供的局部打印功能: <input type="button" value="打印" onclick="javascript:$('#form2').jqprint()" /> 在IE下可能会有页眉页脚,需在“文件-页面设置”里去掉.…
1.js实现(可实现局部打印)  <html> <title>js打印</title> <head></head><body> <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" /> <input id="btnP…
JS实现打印功能(包括打印预览.打印设置等) 绪 最近在进行项目开发时,需要实现后台管理端打印功能,遂在网上一阵搜索,搜到了很多相关的文章.其中绝大部分文章都是使用的Lodop5.0(Web打印和套打控件)控件,而且有些环境下还不能使用.如有想使用此控件实现打印功能的盆友,可点击进行下载.但我强烈推荐下面的方法,即利用系统本身的打印属性实现打印功能.简单的一条系统调用命令即可实现. 前提条件: 进行的电脑必须连接有打印机,至于判断PC是否连接打印机的问题还未能解决,欢迎有解决方法的朋友留言,小生…