声明： 本文是我看完 jQuery 插件 jquery.PrintArea.js 后， 基本上默写出来的， 内容大致相同， 只是多加了写注释
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="div" class="haha">test</div> <button onclick="doPrint()">print</button> </body> </html>
(function($) {
// 多次调用打印时标识不同ID
var printCount = 0;
// 区域打印
$.fn.printArea = function() {
// 打印区域的目标元素
var tarEle = $(this);
var idPrefix = "printArea_";
// remove前一个打印区域iframe
removePrintArea(idPrefix + printCount);
printCount++;
var iStyle = "position:absolute;width:0px;height:0px;left:-10px;top:0px;";
var iId = idPrefix + printCount;
// 创建一个新 iframe ，并追加到body体最后面
var iframe = document.createElement("IFRAME");
$(iframe).attr({
style: iStyle,
id: iId
});
document.body.appendChild(iframe);
// 打印区域 iframe 的文档对象
var iDoc = iframe.contentWindow.document;
// 遍历当前文档中所有的 link 标签， 将这些 css 样式表写入到打印区域 iframe 文档中
$(document).find("link")
.filter(function() {
return $(this).attr("rel").toLowerCase() == "stylesheet";
})
.each(function() {
iDoc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />");
});
// 将打印区域目标元素内容和class属性加入到一个新 div 中， 并写入到打印区域 iframe 文档对象中
iDoc.write("<div class='" + $(tarEle).attr("class") + "'>" + $(tarEle).html() + "</div>");
iDoc.close();
// 用打印区域 iframe 子窗口对象调用print()执行打印
var iframeWindow = iframe.contentWindow;
iframeWindow.close();
iframeWindow.focus();
iframeWindow.print();
};
var removePrintArea = function(id) {
$("iframe#" + id).remove();
};
})(jQuery);
function doPrint() {
$("#div").printArea()
}
相关推荐
jQueryPrint.7z 是一个包含jQuery打印插件的压缩包，这个插件是JavaScript库jQuery的一个扩展，专门用于实现网页的打印功能。在HTML页面中，我们经常需要提供一种方式让用户能够方便地打印页面内容，而jQuery Print...
总结来说，使用jQuery实现HTML区域打印主要涉及选择要打印的元素、隐藏不需要打印的部分、创建打印样式表以及在用户触发时执行打印操作。在ASP.NET中，可以结合服务器端和客户端技术，轻松地将这一功能整合到你的Web...
在本项目“jqueryprint.zip”中，我们可以看到与这个功能相关的文件，包括print.html、index.php、images以及js目录。下面我们将详细探讨jQuery PrintArea的工作原理、使用方法以及如何通过它来实现带图片和格式的...
本篇文章将详细探讨如何使用JQuery实现“打印指定区域”的功能。 首先，我们需要理解JQuery的核心理念：它简化了JavaScript的DOM操作，提供了丰富的选择器和方法，使得JavaScript编程更加简洁高效。在JQuery中处理...
实现javascript打印功能，打印整个页面就很简单，但如果指定打印某一个区域就有点难点，这里有一个jQuery插件PrintArea可实现打印页面某区域功能。 使用说明 需要使用jQuery库文件和PrintArea库文件
在这个例子中，当用户点击“打印”按钮（`#printBtn`）时，`jQuery`会隐藏非打印元素（`body *:not(.print-only)`），显示仅在打印时才需要的元素（`.print-only`），并添加指向`print.css`的`<link>`标签，以应用...
1. **选择性打印**：通过jQuery Print Plugin，你可以指定网页中的特定元素或区域进行打印，而不是打印整个页面。这对于那些希望提供定制化打印体验的开发者来说非常有用。 2. **易用性**：插件的API设计简洁，只需...
- **选择打印区域**：使用jQuery选择器，如`$("#printArea")`来指定要打印的DOM元素。 - **调用插件方法**：使用`.printPreview()`方法，例如`$("#printArea").printPreview();`，这将在新的窗口中打开预览并准备...
"jquery网页打印控件制作页面局部打印文本效果"这个主题就是关于如何使用jQuery来创建一个功能，使得用户可以仅打印网页的选定区域，从而提高用户体验并节省纸张。下面将详细介绍这个过程及其相关知识点。 首先，...
jQuery Print Area插件允许开发者指定网页中的某个部分作为打印区域，而不是打印整个页面。这使得用户在打印时能够排除不必要的广告、侧边栏或其他非关键信息，提高打印效率和质量。此外，该插件兼容所有主流浏览器...
这种插件对于那些只需要打印部分页面元素，如订单、发票或发货单的场景非常实用。 在实现打印发货单的过程中，主要会用到以下知识点： 1. **jQuery**: jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档...
- 只打印选定区域：你可以选择只打印页面的一部分，这在处理复杂布局或需要保密的部分时特别有用。 - 预览样式自定义：允许开发者调整预览窗口的样式，以匹配网站的视觉风格。 - 多语言支持：插件可能包含多语言资源...
"jquery打印区域"是jQuery的一个应用，允许开发者指定网页中的特定区域进行打印，而不是整个页面。这个功能在很多场景下都非常实用，比如用户只需要打印某个表格或者图表时，避免浪费纸张和墨水。 首先，我们需要...
例如，可以使用CSS媒体查询`@media print`来定义打印样式，将不需要打印的部分设置为不可见，如`@media print { .non-printable { display: none; } }`。 4. **CSS和JS的配合**： - 在jQuery中，可以动态修改元素...
jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件。该网页打印插件可以打印指定区域的网页元素，可以指定跳过不打印某些元素，还可以打印整个页面内容。并且提供了丰富的打印参数设置。
jQuery PrintArea.js是一款非常实用的JavaScript插件，它专门用于扩展jQuery的功能，使得网页中的特定区域可以方便地进行打印操作。这款插件的核心是通过选取DOM元素，将选中的部分转化为可打印的内容，从而避免了...
"jquery局部打印"是jQuery的一个扩展功能，它允许用户在不离开当前页面的情况下，选择性地打印网页的特定部分。这个功能对于那些希望提供用户友好打印体验的网站来说非常有用，例如，可能只想让用户打印特定表格或...
PrintArea.js是一个jQuery插件，专门用于实现网页区域的打印功能。在网页设计中，有时我们只需要打印特定部分而不是整个页面，PrintArea.js就是为此目的而设计的。它允许用户选择要打印的DOM元素，只需几行代码即可...
jQuery PrintArea是一款实用的前端打印解决方案，专为网页开发者设计，使得用户可以方便地选择并打印网页中的特定区域。这个插件的核心功能是通过简单的API调用来设置需要打印的内容，避免了全屏打印或者不必要的...
在本文中，我们将深入探讨如何使用jQuery库来打印网页中的特定区域，特别是div元素内容。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务，使得前端开发更加高效。在这个主题中，我们将...