<think>好的，用户想实现仅打印
网页中
指定区域的功能，
使用纯前端技术。我需要先回忆相关的知识，然后结合用户提供的引用
内容来给出最佳实践和示例代码。
首先，用户提到的引用[1]和[2]都与前端打印有关，特别是引用[1]提到了
使用window.print
()和恢复
页面内容的方法，引用[2]提到了浏览器自带的打印功能和print.js。这可能涉及到两种方法：一种是
使用原生的JavaScript，另一种是
使用第三方库如print.js。
首先，原生方法的话，用户需要将
指定区域的
内容提取出来，然后打开新窗口或者
iframe，将
内容放入其中，再
调用打印。打印完成后需要恢复原
页面内容，这里可以用window.onafterprint事件来处理，如引用[1]中的代码示例。此外，可能还需要处理样式，确保打印的样式正确，比如隐藏其他元素，或者在打印样式表中设置。
第二种方法是
使用print.js这样的库，但用户要求纯前端，所以需要确认是否引入外部库。不过用户可能希望尽量少用第三方库，所以可能更倾向于原生方法。
步骤大概如下：
1. 复制
指定区域的HTML
内容。
2. 创建一个新的窗口或
iframe。
3. 将复制的HTML插入到新窗口中，并添加必要的打印样式。
4.
调用print
()方法，打印完成后关闭窗口并恢复原
页面。
需要注意的问题：
- 样式问题，可能需要将原
页面的样式复制到新窗口，或者
使用媒体查询@media print来调整打印样式。
- 异步处理，确保打印完成后恢复
页面内容，避免
页面被锁定，如引用[1]提到的
使用onafterprint事件。
- 处理图片和外部资源，可能需要确保新窗口中的资源加载完成再打印。
现在，结合用户提供的引用，特别是引用[1]中的代码示例，他们用到了保存原始
内容，然后在打印后恢复。这可能适用于当用户需要临时修改当前
页面的
内容，打印
特定区域，然后再恢复。但这种方法可能会影响用户体验，因为会临时改变
页面内容。
另一种方法是打开新窗口或
iframe，这样不会影响原
页面。比如，创建一个隐藏的
iframe，将
指定区域的
内容复制进去，然后打印
iframe的
内容。打印完成后自动关闭或移除
iframe。
或者，
使用媒体查询，在打印时隐藏不需要的
区域。比如，在CSS中设置@media print规则，将非
目标区域隐藏，这样用户直接
调用window.print
()时只会
显示特定区域。这种方法不需要操作DOM，可能更简单，但需要调整CSS，并且可能不适用于动态
内容或需要多次不同
区域打印的情况。
用户可能需要根据不同场景选择不同方法。如果是一次性打印某个固定
区域，CSS媒体查询可能更简单。如果是动态选择
区域，可能需要用JavaScript操作DOM。
现在，我需要给出示例代码。根据引用[1]中的代码，用户
使用了一个新窗口，保存原始
内容，打印后恢复。但是这可能不是最佳实践，因为修改原
页面的body
内容可能会有副作用，比如事件监听器的丢失。
更好的方法可能是创建一个
iframe，将
内容复制进去，然后打印
iframe。或者
使用cloneNode来复制元素，避免影响原
页面。
所以，示例代码可能如下：
方法一：
使用隐藏
iframe
1. 创建
iframe，设置样式为隐藏。
2. 将
目标区域的
内容复制到
iframe中。
3.
调用iframe的print方法。
方法二：
使用新窗口
1. 打开新窗口，写入
目标区域的
内容和必要的样式。
2.
调用print
()，然后关闭窗口。
方法三：
使用CSS媒体查询
在CSS中添加：
@media print {
body * {
visibility: hidden;
}
.print-area, .print-area * {
visibility: visible;
}
.print-area {
position: absolute;
left: 0;
top: 0;
}
}
然后直接
调用window.print
()，用户就可以只看到打印
区域的
内容。这种方法不需要操作DOM，但可能布局需要调整，比如绝对定位，确保打印
区域在正确的
位置。
考虑到用户希望最佳实践，可能需要结合多种方法。比如，
使用CSS媒体查询简单，但可能布局问题；
使用iframe或新窗口更灵活，但代码复杂一些。
根据引用[1]中的代码，用户可能更倾向于
使用新窗口的方式，并在打印完成后恢复
内容。但恢复
内容可能有问题，因为如果直接替换innerHTML，可能会破坏原有的事件监听器等。所以更好的方法是不修改原
页面，而是将
内容复制到新窗口，打印后关闭即可，不需要恢复，因为原
页面没有被修改。
所以，正确的步骤应该是：
1. 获取
目标区域的HTML
内容。
2. 打开一个新窗口。
3. 将
内容写入新窗口，并添加样式。
4.
调用新窗口的print
()方法。
5. 新窗口在打印后自动关闭，或者用户手动关闭。
不过，有些浏览器可能会阻止弹出窗口，所以需要确保在用户交互的事件处理函数中触发，比如点击按钮时。
示例代码：
function printArea
(selector
) {
const content = document.querySelector
(selector
).innerHTML;
const printWindow = window.open
('', '_blank'
);
printWindow.document.write
(`
<html>
<head>
<title>打印</title>
<style>
/* 打印样式 */
@media print {
body { margin: 0; }
}
</style>
</head>
<body>
${content}
</body>
</html>
`
);
printWindow.document.close
();
printWindow.print
();
// 自动关闭窗口，可能在某些浏览器中不允许
setTimeout
(() => {
printWindow.close
();
}, 100
);
}
但是，可能遇到弹出窗口被拦截的问题。所以另一种方法是
使用iframe：
function printArea
(selector
) {
const content = document.querySelector
(selector
).cloneNode
(true
);
const
iframe = document.createElement
('
iframe'
);
iframe.style.position = 'absolute';
iframe.style.width = '0';
iframe.style.height = '0';
iframe.style.border = 'none';
document.body.appendChild
(iframe);
const
iframeDoc =
iframe.contentDocument ||
iframe.contentWindow.document;
iframeDoc.open
();
iframeDoc.write
(`
<html>
<head>
<style>
${document.querySelector
('style'
).innerHTML}
</style>
</head>
<body>
${content.innerHTML}
</body>
</html>
`
);
iframeDoc.close
();
iframe.contentWindow.onload = function
() {
iframe.contentWindow.print
();
document.body.removeChild
(iframe);
};
}
这种方法将
内容复制到
iframe中，并应用原
页面的样式，然后打印。打印后移除
iframe。
此外，根据引用[2]，用户可能可以
使用print.js库来简化操作，但用户要求纯前端技术，可能允许
使用库。不过示例代码需要纯原生。
另外，引用[1]中的代码用到了onafterprint事件来恢复
页面内容，但这种方法需要修改原
页面的
内容，可能不太推荐，因为会影响用户体验，并可能导致问题。
综合来看，最佳实践可能是
使用iframe或新窗口，并避免修改原
页面的
内容。同时，结合CSS媒体查询来隐藏不需要打印的
部分，可能更简单，但需要根据具体情况选择。
最终给出两种方法的示例代码，并说明优缺点，以及注意事项，比如样式继承、资源加载、弹出窗口拦截等。</think>### 分步解答
要实现
网页指定区域打印，可通过以下两种纯前端方案实现：
---
### 方案一：原生JavaScript新窗口打印（推荐）
```javascript
function printSpecificArea
(selector
) {
// 保存原
页面内容
const originalContents = document.body.innerHTML;
// 提取
目标区域内容
const targetElement = document.querySelector
(selector
);
const printContents = targetElement.outerHTML;
// 替换整个
页面为打印
内容
document.body.innerHTML = printContents;
//
调用打印功能
window.print
();
// 通过onafterprint事件恢复原
内容
window.onafterprint =
() => {
document.body.innerHTML = originalContents;
location.reload
(); // 确保事件监听器等状态恢复
};
}
//
调用示例：printSpecificArea
('#reportTable'
)
```
**特点**：
- 直接修改`document.body`实现
内容替换
-
使用`onafterprint`事件恢复
页面[^1]
- 需要处理样式继承问题（可添加`<style>`标签到打印
内容中）
---
### 方案二：CSS媒体查询控制
```html
<style>
@media print {
body * {
visibility: hidden;
}
.print-area, .print-area * {
visibility: visible;
}
.print-area {
position: absolute;
left: 0;
top: 0;
}
}
</style>
<button onclick="window.print
()">打印表格</button>
<div class="print-area">
<!-- 需要打印的
内容 -->
</div>
```
**特点**：
- 完全无需JavaScript
- 通过CSS控制
显示逻辑
- 需要处理打印
内容的定位问题
---
### 混合优化方案（推荐）
```javascript
const printUtils = {
print
(selector
) {
const printContent = document.querySelector
(selector
).outerHTML;
const printWindow = window.open
('', '_blank'
);
printWindow.document.write
(`
<html>
<head>
<title>打印文档</title>
<style>
${this.getPageStyles
()} // 继承原
页面样式
@media print {
@page { margin: 0; }
body { margin: 1cm; }
}
</style>
</head>
<body>
${printContent}
</body>
</html>
`
);
printWindow.document.close
();
printWindow.print
();
setTimeout
(() => printWindow.close
(), 1000
);
},
getPageStyles
() {
return Array.from
(document.styleSheets
)
.map
(sheet => {
try { return Array.from
(sheet.cssRules
).map
(rule => rule.cssText
).join
(''
) }
catch
(e
) { return '' }
}
).join
(''
);
}
};
```
**优势**：
- 新建独立打印窗口，不影响原
页面[^2]
- 自动继承
页面样式
- 支持复杂
内容打印
- 避免弹出窗口拦截问题
---
### 注意事项
1. **样式继承**：需要复制原
页面样式表，否则打印
内容可能丢失样式
2. **图片处理**：确保
使用绝对路径图片地址
3. **异步
内容**：
使用`window.onload`确保资源加载完成
4. **浏览器兼容**：`onafterprint`事件在Safari中支持度较低
5. **移动端适配**：建议添加`<meta name="viewport">`标签
本文介绍如何利用Iframe标签精准展示目标网页的特定区域，提供了三种方法实现这一功能，包括直接设置Iframe属性、使用DIV控制布局及创建中间文件进行内容裁剪。
扫一扫
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
