前端局部打印是很多业务场景的刚需，比如打印订单详情、报表片段、凭证内容等，传统通过隐藏非打印区域DOM再调用打印的方式存在操作复杂、容易破坏页面原有布局的问题，实际上我们可以通过更直接的方式实现指定HTML片段的打印，不需要额外切换DOM的显示状态。
方案一：使用原生window.print结合临时iframe
这种方式不需要修改当前页面的DOM状态，通过创建临时iframe承载需要打印的HTML内容，调用iframe的打印方法即可，打印完成后自动清理临时节点，对原页面没有任何影响。
实现步骤如下：
- 获取需要打印的HTML片段内容
- 创建隐藏的iframe元素，设置其样式为不可见
- 将打印片段写入iframe的document中
- 调用iframe的print方法触发打印
- 打印完成后移除临时iframe
完整代码示例如下：
/**
* 原生局部打印方法
* @param {string} printContent 需要打印的HTML字符串
* @param {string} title 打印页面标题
*/
function nativeLocalPrint(printContent, title = '打印内容') {
// 创建临时iframe
const iframe = document.createElement('iframe');
iframe.style.width = '0';
iframe.style.height = '0';
iframe.style.position = 'absolute';
iframe.style.left = '-9999px';
iframe.style.top = '-9999px';
document.body.appendChild(iframe);
// 获取iframe的document对象
const iframeDoc = iframe.contentWindow || iframe.contentDocument;
const doc = iframeDoc.document || iframeDoc;
// 写入打印内容
doc.open();
doc.write(`
<html>
<head>
<title>${title}</title>
<style>
/* 打印样式，可根据需求调整 */
body { margin: 0; padding: 20px; font-family: 'Microsoft YaHei', sans-serif; }
@media print {
body { padding: 0; }
}
</style>
</head>
<body>
${printContent}
</body>
</html>
`);
doc.close();
// 等待内容加载完成后触发打印
iframe.onload = function() {
try {
iframeDoc.print();
} catch (e) {
console.error('打印触发失败:', e);
} finally {
// 打印完成后移除iframe
setTimeout(() => {
document.body.removeChild(iframe);
}, 100);
}
};
}
// 使用示例
const targetDom = document.getElementById('print-area');
if (targetDom) {
nativeLocalPrint(targetDom.innerHTML, '订单打印');
}方案二：使用print-js第三方库
print-js是一个轻量的前端打印库，原生支持局部打印HTML片段，不需要我们手动处理iframe逻辑，内部已经封装了临时节点创建、打印触发、资源清理的完整流程，使用起来更加简洁。
首先需要通过npm安装或者引入CDN资源：
<script src="https://cdn.jsdelivr.net/npm/print-js@1.6.0/dist/print.min.js"></script>
如果是模块化项目，也可以通过npm安装后引入：
import print from 'print-js';
// 或者
const print = require('print-js');使用print-js实现局部打印的代码非常简单，只需要指定打印类型为html，传入对应的内容即可：
// 打印指定DOM的HTML内容
function printByPrintJs(domId) {
const targetDom = document.getElementById(domId);
if (!targetDom) {
console.error('未找到对应的打印节点');
return;
}
print({
printable: targetDom.innerHTML, // 打印的HTML内容
type: 'html', // 打印类型
style: `body { margin: 0; padding: 20px; font-family: 'Microsoft YaHei', sans-serif; }`, // 自定义打印样式
scanStyles: false // 是否扫描页面原有样式，设为false避免引入无关样式
});
}
// 使用示例
printByPrintJs('print-area');两种方案对比
我们可以通过下面的表格对比两种方案的适用场景：
| 方案 | 优势 | 劣势 | 适用场景 |
|---|---|---|---|
| 原生iframe方案 | 无额外依赖，兼容性好，可控性高 | 需要手动处理较多边界逻辑 | 对依赖体积敏感、需要高度定制打印逻辑的场景 |
| print-js方案 | 使用简单，内置多种打印类型支持，边界处理完善 | 需要引入第三方库 | 希望快速实现功能、不需要额外定制复杂逻辑的场景 |
注意事项
无论使用哪种方案，都需要注意以下几点：
- 打印的HTML片段中尽量避免使用过于复杂的布局，尤其是flex、grid等现代布局，部分旧版浏览器打印时可能出现兼容问题
- 如果打印内容包含图片，建议确认图片地址可访问，或者使用base64格式的图片避免打印时加载失败
- 自定义打印样式时，优先使用
@media print媒体查询包裹，避免影响屏幕显示的样式 - 如果打印内容中有<input>、<textarea>等表单元素，需要提前将其值同步到HTML中，避免打印时内容为空
通过上述两种方案，都可以实现不隐藏显示DOM的优雅局部打印，开发者可以根据项目实际需求选择合适的实现方式，既可以避免传统方案带来的布局问题，也能降低代码的维护成本。
局部打印HTML片段打印window_printprint_js前端打印修改时间：2026-06-05 17:05:21