JavaScript新手求助：window.print()无法正常工作问题

嘿，作为JavaScript新手能关注到window.print()的用法已经很棒啦！你的理解完全没错——默认情况下window.print()确实会触发浏览器的打印功能，打印当前页面<body>标签里的所有内容。不过实际开发中我们经常需要自定义打印内容或样式，这里给你几个实用的小技巧：

• 自定义打印特定内容
  如果只想打印页面中的某一部分，不用打印整个body，可以通过创建临时容器的方式实现：

function printTargetContent() {
  // 选择你想要打印的元素，比如这里选h1和h2
  const targetElements = document.querySelectorAll('h1, h2');
  const printContainer = document.createElement('div');
  
  // 把目标元素复制到临时容器
  targetElements.forEach(el => {
    printContainer.appendChild(el.cloneNode(true));
  });
  
  // 将临时容器添加到页面
  document.body.appendChild(printContainer);
  // 触发打印
  window.print();
  // 打印完成后移除临时容器
  document.body.removeChild(printContainer);
}

• 优化打印样式
  默认的页面样式可能在打印时显示效果不好，你可以用CSS的@media print媒体查询专门定义打印样式：

/* style.css 中添加 */
@media print {
  /* 隐藏不需要打印的元素，比如script标签 */
  script {
    display: none;
  }
  /* 调整打印时的标题样式 */
  h1 {
    font-size: 28px;
    color: #333;
  }
  h2, h3 {
    font-size: 22px;
    color: #555;
  }
  /* 去掉页面默认的边距，让打印内容更紧凑 */
  body {
    margin: 0;
    padding: 1cm;
  }
}

• 直接打印整个页面
  如果你的需求就是打印当前整个页面，那直接调用window.print()就可以啦。比如你可以在HTML里加个按钮来触发：

<!-- 在body里添加按钮 -->
<button onclick="window.print()">点击打印页面</button>

针对你给出的HTML代码，只要在script.js里加入window.print();，打开页面后就会自动弹出打印预览窗口啦。

内容的提问来源于stack exchange，提问作者suhas tangadle