JavaScript 中怎么用 BOM 操作实现一个打印指定区域内容功能-js教程-PHP中文网

最稳解法是用@media print配合display: none隐藏非目标区域，再通过javascript控制“隐藏→打印→还原”流程，确保目标区域独立、样式自包含且不干扰布局。

javascript 中怎么用 bom 操作实现一个打印指定区域内容功能

直接用 BOM 的 window.print() 无法指定打印区域，必须配合 HTML/CSS 控制——核心思路是：临时隐藏非目标内容，再触发打印，最后恢复页面状态。

准备可打印的指定区域

给要打印的内容包裹一个有明确标识的容器（比如 id="print-section"），确保它结构独立、样式自包含。避免使用绝对定位或浮动干扰布局，否则打印预览可能错乱。

推荐用语义化标签如 <article id="print-section"></article> 或 <div class="print-area"> <li>该区域内的图片、表格、字体等应尽量使用内联样式或已加载的 CSS，避免打印时因资源未加载而空白</li> <li>避免在该区域内使用 <code>display: none 或 visibility: hidden 的元素，它们会直接消失，无法打印

用 CSS 媒体查询隔离打印样式

在页面中加入 @media print 规则，隐藏其他部分，只显示目标区域：

<style>
  /* 默认隐藏所有，只让打印区可见 */
  body * { display: none; }
  #print-section, #print-section * { display: block; }
  /* 可选：重置边距、分页等 */
  @media print {
    body { margin: 0; padding: 0; }
    #print-section { page-break-inside: avoid; }
  }
</style>

注意：display: none 在打印媒体中生效，但不能写在外部 CSS 文件里（除非明确用 media="print" 加载），否则可能被浏览器忽略。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

JavaScript 控制打印流程

封装一个函数，完成「隐藏→打印→还原」三步操作：

function printSection(id) {
  const section = document.getElementById(id);
  if (!section) return;
<p>// 保存原始 display 状态（仅针对 body 下直系子元素，简化处理）
const bodyChildren = Array.from(document.body.children);
const originalDisplays = bodyChildren.map(el => el.style.display);</p><p>// 隐藏全部，只显示目标区域
bodyChildren.forEach(el => {
el.style.display = 'none';
});
section.style.display = 'block';</p><p>// 强制重排，确保样式生效（尤其在 Chrome 中必要）
void document.body.offsetHeight;</p><p>// 打印
window.print();</p><p>// 恢复原状（延迟执行，避免打印对话框关闭前被覆盖）
setTimeout(() => {
bodyChildren.forEach((el, i) => {
el.style.display = originalDisplays[i] || '';
});
}, 100);
}</p>

调用方式：printSection('print-section');