jquery调用打印机打印_jquery调用打印机,jquery获取打印机列表资源-CSDN文库

共3个文件

js：2个

html：1个

4星 · 超过85%的资源需积分: 50 31 浏览量 2016-06-17 02:04:41 上传评论收藏 27KB ZIP 举报

在IT行业中，前端开发经常需要处理打印功能，特别是在制作网页发票、订单或小票时。`jQuery`，作为广泛使用的JavaScript库，提供了便利的方式来实现这一需求。本文将深入探讨如何利用`jQuery`调用打印机打印功能，以及相关知识点。我们需要理解浏览器的打印机制。在Web环境下，打印通常是通过调用浏览器的`window.print()`方法来实现的。这个方法会弹出一个打印预览对话框，让用户选择打印机和打印设置。但是，`window.print()`直接调用可能会导致不必要的页面元素一同被打印，因此我们通常需要对打印内容进行适当的定制。在`jQuery`中，我们可以先隐藏不需要打印的元素，然后创建一个专门用于打印的CSS样式表，以控制打印样式。这可以通过创建一个新的`<link>`标签来实现，该标签链接到一个只在打印时生效的CSS文件。示例如下： ```html <!DOCTYPE html> <html> <head> <title>jQuery Print Test</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style id="printStyle" media="print"> /* 在这里定义只在打印时生效的样式 */ </style> </head> <body>  <button id="printBtn">打印</button> <script> $(document).ready(function() { $("#printBtn").click(function() { // 隐藏非打印元素 $("body *").not(".print-only").hide(); // 显示打印按钮 $(".print-only").show(); // 添加打印样式 var printStyle = document.getElementById("printStyle"); printStyle.setAttribute("href", "print.css"); // 打印 window.print(); // 打印完成后恢复页面状态 setTimeout(function() { $("body *").show(); $(".print-only").hide(); printStyle.setAttribute("href", ""); }, 500); }); }); </script> </body> </html> ``` 在这个例子中，当用户点击“打印”按钮（`#printBtn`）时，`jQuery`会隐藏非打印元素（`body *:not(.print-only)`），显示仅在打印时才需要的元素（`.print-only`），并添加指向`print.css`的`<link>`标签，以应用打印样式。`window.print()`执行后，页面状态会在500毫秒后恢复。在`print.css`中，你可以定义特定的打印样式，比如设置背景颜色、页眉和页脚，以及调整布局以适应打印媒介。确保使用`@media print`来限制这些样式仅在打印时生效。此外，还有一些第三方插件可以帮助简化打印功能，如`jqprint`或`jQuery.print`。它们提供了更高级的选项，如自定义打印范围、是否包括图片等。例如，`jQuery.print`插件的使用方法如下： ```javascript $.print("#printArea", { element: true, type: "area" }); ``` 这将打印ID为`printArea`的元素。`element: true`表示直接打印指定元素，`type: "area"`表示打印区域。通过`jQuery`调用打印机打印涉及理解浏览器的打印机制、定制打印样式以及可能利用第三方插件优化打印体验。确保在设计时考虑打印布局、颜色、字体等，以确保打印出来的内容清晰、准确。

展开

资源推荐

资源详情

资源评论

收起资源包目录

printTest.zip （3个子文件）

printTest

index.html 904B

jquery.PrintArea.js 7KB

jquery-1.4.2.min.js 70KB

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <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#biuuu_button").click(function(){  
  
  $("div#myPrintArea").printArea();  
  
});  
});  
   
</script>  
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
      
<input id="biuuu_button" type="button" value="打印"></input>  
  
<div id="myPrintArea">.....文本打印部分.....</div>   
  </body>
</html>