如何通过JS全局显示所有HTML隐藏内容后触发页面打印

问题原因 #

你之前的写法不生效有两个核心问题：

1. document.getElementsByClassName("main") 返回的是匹配类名的元素集合（类数组对象），不是单个DOM元素，直接访问.style属性无法生效
2. 你页面内的隐藏状态是设置在.describe、.chart这类子元素上的，仅修改父元素.main的显示状态，不会覆盖子元素的display:none设置

方案1：用CSS打印媒体查询实现（更推荐） #

不需要修改JS逻辑，直接在页面<head>的<style>标签中添加以下代码即可，打印时会自动强制显示所有隐藏内容，打印结束后页面保持原有交互状态，无需操作DOM：

@media print {
  /* 打印时强制所有折叠描述、图表显示 */
  .describe, .chart {
    display: block !important;
  }
  /* 可选：隐藏打印按钮避免被打印出来 */
  footer button {
    display: none !important;
  }
}

方案2：用JS实现打印前手动修改状态 #

如果你需要通过JS控制显示逻辑，可以直接把以下displayAndPrint函数添加到你的script.js文件中，该方案会在打印结束后自动恢复页面原来的展开/折叠状态：

function displayAndPrint() {
  const targetEls = document.querySelectorAll('.describe, .chart');
  // 存储元素原有显示状态
  const originDisplayStates = Array.from(targetEls).map(el => el.style.display);

  // 全部设置为显示
  targetEls.forEach(el => el.style.display = 'block');

  // 监听打印结束/取消事件，恢复原有状态
  const restoreState = () => {
    targetEls.forEach((el, idx) => {
      el.style.display = originDisplayStates[idx];
    });
    window.removeEventListener('afterprint', restoreState);
  };
  window.addEventListener('afterprint', restoreState);

  // 触发系统打印弹窗
  window.print();
}

内容的提问来源于stack exchange，提问作者Patryk Kobyłka