如图，我们要打印主页面中 工单详情部分。
但是由于要打印的部分有样式，并且表格太宽，如果 要直接打印的话，打出来的纸张上字太小且颜色模糊，不易查看。
只要去掉样式，字体会变大，打印出来的效果要好的多。
方案一：我们可以取出要打印的部分，将打印部分填充到弹出的新页面中，然后我就再打印弹出页面即可。
这样做的话，有个缺陷，就是会先把要打印的页面显示出来，然后要用户再次点击打印按键，显示比较啰嗦蛮烦。
方案二：可以在要打印的页面中，嵌入一隐藏的iframe，用于存放要打印的部分代码。
我们点击打印按钮时，实际上是打印这个隐藏iframe的内容。
打印页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>工单详细信息</title>
<script type="text/javascript">
function printPage() {
//获取当前页的html代码
var bodyhtml = window.document.body.innerHTML;
//设置打印开始区域、结束区域
var startFlag = "<!--startprint-->";
var endFlag = "<!--endprint-->";
// 要打印的部分
var printhtml = bodyhtml.substring(bodyhtml.indexOf(startFlag),
bodyhtml.indexOf(endFlag));
// 生成并打印ifrme
var syfPrint = document.frames[0];
syfPrint.document.body.innerHTML = printhtml;
syfPrint.document.execCommand("Print");
}
</script>
</head>
<body>
<div id="bd">
<div id="right_box">
<a href="#" onclick="javascript:history.back(1); event.returnValue=false">
<< 返回</a><br />
<!--startprint-->
//////////////////////要打印的内容部分//////////////////////<br />
<!--endprint-->
<input type="button" value="打印" onClick="printPage()" />
</div>
<iframe src="" width="0" height="0" frameborder="0"></iframe>
</body>
</html>
- 大小: 234.9 KB
分享到：
相关推荐
首先，`window.print()` 方法是JavaScript中的一个全局函数，它会触发浏览器的打印对话框，允许用户选择打印当前页面或对其进行自定义设置。在调用此方法后，浏览器会尝试呈现当前窗口的内容，包括文本、图像、表格...
`window.print()` 是JavaScript中的一个内置函数，它用于触发浏览器的打印对话框，让用户可以选择打印网页内容。在这个主题下，我们将深入探讨`window.print()`分页打印的相关知识点，以及如何通过`printTest.html`...
`window.print()`是JavaScript中一个非常实用的方法，它用于触发浏览器的默认打印对话框，允许用户打印当前页面的内容。该方法没有参数，也没有返回值。当调用`window.print()`时，浏览器会弹出一个打印对话框，用户...
在本文中，我们将探讨如何利用 `window.print()` 结合其他技术来实现打印指定div或指定网页区域。 **方法一：指定不打印区域** 这种方法是通过CSS来实现的。创建一个 `.noprint` 的CSS类，并将不想打印的内容放入...
在这种情况下，我们可以通过一些技巧来实现只打印指定的`div`内容。以下是如何使用`window.print`配合JavaScript实现这一目标的详细步骤和示例代码解析： 1. **创建包含要打印内容的`div`**： 在HTML中，将需要...
`window.print()` 是JavaScript中一个非常实用的函数，用于触发浏览器的打印对话框，让用户可以选择打印当前页面或部分内容。本文将详细介绍如何使用`window.print()` 实现Web打印，并提供示例代码帮助理解。 1. **...
在JavaScript中，`window.print()`方法是一个非常实用的功能，它允许用户直接从浏览器打印网页内容。然而，默认情况下，打印操作可能会包含页眉和页脚，这些元素可能包含URL、日期或者页码等信息，有时并不符合我们...
`window.print()`方法是JavaScript中的一个内置方法，主要用于在用户浏览器上打开打印对话框，让用户可以选择打印网页内容。这个方法非常实用，尤其对于那些需要提供打印功能的网站来说，如在线文档、报告或者表格等...
在网页打印过程中，有时我们可能需要去除不必要的页眉、页脚以及特定的页面元素，以获得更整洁的打印效果。本文将深入探讨如何通过CSS和JavaScript实现这一目标，以优化Web打印体验。 首先，理解CSS媒体查询是关键...
### 方法一：使用`substr`与`substring`定位并打印指定内容 一种常见的做法是通过JavaScript来提取页面中希望打印的内容。具体实现方式是在页面中定义特殊的标签或注释来标记出需要打印的范围，然后使用`substr`和`...
2. 使用window.print()方法，这将打开浏览器的打印对话框，允许用户选择打印机和设置打印选项。 3. 为了优化预览效果，可以使用CSS媒体查询来隐藏非打印相关的元素（如导航栏、侧边栏等），并调整页眉和页脚的样式。...
()">打印指定内容 ``` 5. **HTML结构和CSS布局**： 为了有效地选择和打印网页部分，需要合理地组织HTML结构，确保需要打印的内容在独立的区块中。同时，使用适当的CSS布局（如Flexbox或Grid）可以使内容更容易定位...
JavaScript作为前端开发中的核心语言，提供了window对象，利用window对象的print方法可以实现Web内容的打印。此方法的优点是兼容性较好，可以在IE和火狐（Firefox）浏览器下正常工作，这对于开发跨浏览器的打印功能...
JS打印WEB页面与打印预览是指在WEB页面中使用JavaScript语言来实现页面的打印和预览功能。以下是实现这个功能的三种方法： 第一种方法：使用CSS隐藏不打印内容 在这个方法中，我们可以使用CSS来隐藏不需要打印的...
标题“js指定打印页面部分内容代码.zip”涉及到的是JavaScript（js）技术在网页打印功能上的应用。JavaScript是一种广泛用于客户端Web开发的脚本语言，它可以与HTML和CSS紧密结合，实现动态网页交互。在这个压缩包中...
1. **选择性打印**：jQuery.print.js允许开发者指定要打印的DOM元素，避免了整个页面被打印，提高打印效率和用户体验。 2. **样式处理**：插件会尝试将页面样式应用到打印内容，确保打印效果与屏幕显示一致。 3. *...
1. **JS批量打印**：JavaScript 提供了 `window.print()` 方法来触发浏览器的打印功能。通过在 JavaScript 代码中调用这个方法，可以实现网页内容的批量打印。但是，`window.print()` 默认会打印整个网页，包括不必...
2. **编写脚本**：定义一个函数，该函数接收容器 ID 作为参数，修改文档内容以便仅打印指定区域，然后调用 `window.print()`。 3. **触发打印**：通过按钮点击事件调用上面定义的函数。 ```html ...
"jqPrint" 是一个基于jQuery的插件，它允许开发者方便地实现页面内容的分页打印功能，无需复杂的CSS调整或JavaScript编程。在本篇中，我们将深入探讨如何使用jqPrint实现这一目标，以及涉及到的相关技术。 首先，...