如何在window.print()打印弹窗中添加自定义按钮？

原生浏览器的打印对话框（通过window.print()触发）属于浏览器内置组件，无法直接修改其UI或添加自定义按钮。要实现类似需求，你可以通过以下方式自定义打印流程：

方法一：自定义打印预览弹窗 #

创建模拟的打印预览弹窗，在其中添加自定义按钮，再触发原生打印：

<button onclick="openCustomPrintDialog()">打开自定义打印弹窗</button>

<script>
function openCustomPrintDialog() {
  // 创建弹窗容器
  const dialog = document.createElement('div');
  dialog.style.cssText = `
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    z-index: 9999;
  `;

  // 添加预览内容（可替换为你需要打印的内容）
  const preview = document.createElement('div');
  preview.innerHTML = '<h3>打印预览内容</h3><p>这里是要打印的内容示例</p>';
  dialog.appendChild(preview);

  // 添加自定义按钮容器
  const btnContainer = document.createElement('div');
  btnContainer.style.marginTop = '20px';
  btnContainer.style.display = 'flex';
  btnContainer.style.gap = '10px';

  // 打印按钮
  const printBtn = document.createElement('button');
  printBtn.textContent = '打印';
  printBtn.onclick = () => {
    window.print();
    document.body.removeChild(dialog);
    document.body.removeChild(overlay);
  };

  // 取消按钮
  const cancelBtn = document.createElement('button');
  cancelBtn.textContent = '取消';
  cancelBtn.onclick = () => {
    document.body.removeChild(dialog);
    document.body.removeChild(overlay);
  };

  // 自定义操作按钮
  const customBtn = document.createElement('button');
  customBtn.textContent = '自定义操作';
  customBtn.onclick = () => {
    alert('执行自定义操作逻辑');
  };

  btnContainer.appendChild(printBtn);
  btnContainer.appendChild(cancelBtn);
  btnContainer.appendChild(customBtn);
  dialog.appendChild(btnContainer);

  // 添加遮罩层
  const overlay = document.createElement('div');
  overlay.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
  `;
  overlay.onclick = cancelBtn.onclick;

  document.body.appendChild(overlay);
  document.body.appendChild(dialog);
}
</script>

方法二：页面内自定义按钮配合打印流程 #

如果不需要弹窗预览，可直接在页面添加自定义按钮，先执行操作再触发打印：

<button onclick="handlePrint()">打印</button>
<button onclick="customOperation()">自定义操作</button>

<script>
function customOperation() {
  // 替换为你的自定义业务逻辑
  console.log('执行自定义操作');
}

function handlePrint() {
  // 先执行自定义操作，再触发打印
  customOperation();
  window.print();
}
</script>

注意：原生打印对话框的UI由浏览器完全控制，无法直接修改，上述方案通过自定义弹窗或前置操作的方式实现类似需求。

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