HTML object标签怎么实现打印指定内容-html教程-PHP中文网

object标签调用webbrowser控件仅在ie/旧edge有效，因其依赖clsid:8856f961-340a-11d0-a96b-00c04fd705a2这一ie专属activex控件，chrome、firefox、safari及新版edge（chromium）均不支持，且现代windows默认禁用activex。

html object标签怎么实现打印指定内容

object 标签调用 WebBrowser 控件只在 IE/旧 Edge 有效

object 标签配合 CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 是 IE 内置的 ActiveX 控件，本质是嵌入一个 IE 渲染引擎实例。它能调用 ExecWB(6,1) 打印当前文档，但仅限于 IE 或旧版 Edge（EdgeHTML），Chrome、Firefox、Safari、新版 Edge（Chromium）完全不支持，且现代 Windows 系统默认禁用 ActiveX。

常见错误现象：document.all.WebBrowser.ExecWB(...) 报错 TypeError: Cannot read property 'ExecWB' of undefined，或弹出安全警告“已阻止不安全的 ActiveX 控件”。

必须把站点加入 IE “受信任的站点”，并手动启用 ActiveX 相关策略（对未标记为可安全执行脚本的 ActiveX 控件初始化并执行脚本）
控件需设置 height="0" width="0" VIEWASTEXT 隐藏自身，否则会显示空白灰色区域
ExecWB(6,6) 表示“直接打印（不弹预览）”，但部分环境会静默失败，无 fallback 机制

@media print + visibility 是跨浏览器唯一可靠方案

想让任意浏览器（包括 Chrome 130+、Safari 19、Edge 131）都只打印指定区域，@media print 是唯一通用解法。用 visibility: hidden 配合绝对定位，比 display: none 更稳妥——避免盒模型塌陷导致内容错位或分页异常。

典型结构：

<div id="print-section">
  <h2>发票</h2>
  <p>金额：¥128.00</p>
</div>
<button onclick="window.print()">打印发票</button>

CSS 必须提前注入（不能 JS 动态 append）：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

@media print {
  body * { visibility: hidden; }
  #print-section, #print-section * { visibility: visible; }
  #print-section { position: absolute; left: 0; top: 0; width: 100%; }
}

不要用 body > *:not(#print-section) 这类选择器，某些打印引擎（如 Electron 的 PDF 导出）解析失败
固定定位元素（position: fixed）需额外加 header, nav, .sidebar { visibility: hidden; }
若目标区域含 canvas 或 SVG，确保其渲染已完成；否则打印时可能为空白

用 data-print 属性动态控制打印范围有隐藏风险

有人用 JS 提取 [data-print="true"] 元素，再临时替换 document.body.innerHTML 来“净化”页面。这看似灵活，但实际极易翻车：

document.body.innerHTML = ... 会销毁所有事件监听器、Vue/React 组件状态、定时器、第三方 SDK（如百度统计）上下文
用户若在打印弹窗打开期间刷新页面或点击其他按钮，JS 逻辑中断，页面永久白屏
某些图表库（如 ECharts）依赖 canvas 上下文，innerHTML 替换后无法恢复绘图状态
即使加 setTimeout 还原，也无法保证还原时机 —— window.print() 是同步触发，但打印对话框关闭无标准回调

结论：除非你完全掌控页面技术栈（纯静态 HTML + 原生 JS），否则别碰 innerHTML 替换方案。

print() 前调用 window.focus() 的真实作用场景

window.focus() 并非为了“激活窗口”，而是解决特定环境下的打印静默失败问题：

Electron 封装应用中，若主窗口未聚焦，window.print() 可能不弹窗也不报错
Safari 16–18 在 iframe 内触发打印时，有时弹出空白预览页
某些企业内网系统使用弹窗打开页面，顶层窗口未激活时打印失效

正确写法是：

function printInvoice() {
  window.focus();
  window.print();
}

注意：window.focus() 对 iframe 内的按钮无效 —— 必须确保调用上下文是顶层 window，否则需用 window.top.focus()（前提是同源）。

真正容易被忽略的是打印样式中的 page-break-inside: avoid 和字体单位。表格跨页断裂、中文用 px 导致缩放失真、rem 在打印时计算异常 —— 这些细节比“怎么触发打印”更影响最终交付质量。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！