JS特定链接打印时隐藏div：Chrome/Edge兼容问题及解决方案

1. 类名不合法：你使用的print:hidden不是有效的HTML类名，类名不能包含冒号（冒号是CSS伪类/伪元素的专属语法符号）。Chrome/Edge对类名合法性的校验更严格，导致样式无法正确应用；而Firefox具备一定容错性，所以能识别该类名并生效。
2. 执行时序问题：Chrome/Edge中window.print()是异步执行的，调用后不会阻塞后续代码。你添加类后立刻触发打印，紧接着就移除了类——浏览器还没来得及基于新的类样式生成打印内容，类就被取消，最终打印的还是显示价格的版本。而Firefox中window.print()会阻塞代码执行，直到用户关闭打印对话框，移除类的操作在打印完成后才执行，因此能正常生效。

方法一：修复类名 + 监听afterprint事件（最可靠） #

1. 先把无效类名改为合法名称（比如print-hidden），并在CSS中定义打印时的隐藏样式：

@media print {
  .print-hidden {
    display: none !important;
  }
}

2. 修改JS逻辑，利用afterprint事件在打印完成后再移除类，彻底避免时序问题：

<a href="javascript:void(0)" onclick="printWithoutPrice()">print without price</a>

<script>
function printWithoutPrice() {
  const priceEle = document.getElementById('priceinfo');
  priceEle.classList.add('print-hidden');
  // 打印完成后移除类并解绑事件
  function handleAfterPrint() {
    priceEle.classList.remove('print-hidden');
    window.removeEventListener('afterprint', handleAfterPrint);
  }
  window.addEventListener('afterprint', handleAfterPrint);
  window.print();
}
</script>

方法二：使用setTimeout延迟移除类（简单兼容） #

如果不想用事件监听，也可以通过setTimeout给浏览器足够的打印准备时间，再执行移除类的操作：

<a href="javascript:if(window.print){
  const ele = document.getElementById('priceinfo');
  ele.classList.add('print-hidden');
  window.print();
  setTimeout(() => ele.classList.remove('print-hidden'), 500);
}">print without price</a>

注意：setTimeout的延迟时间需根据实际情况调整，确保打印内容生成后再执行移除操作，但这种方法不如事件监听可靠，因为不同浏览器的处理速度存在差异。

补充：两种打印版本的更优实现 #

如果需要同时提供“显示价格”和“隐藏价格”的打印按钮，可以通过给body临时添加类的方式实现，更灵活：

<!-- 显示价格打印 -->
<a href="javascript:window.print()">print with price</a>
<!-- 隐藏价格打印 -->
<a href="javascript:void(0)" onclick="printWithoutPrice()">print without price</a>

<script>
function printWithoutPrice() {
  document.body.classList.add('print-hide-price');
  window.addEventListener('afterprint', () => {
    document.body.classList.remove('print-hide-price');
  });
  window.print();
}
</script>

<style>
@media print {
  .print-hide-price #priceinfo {
    display: none !important;
  }
}
</style>

内容的提问来源于stack exchange，提问作者Roman Walters