Vue3中如何从外部组件按钮仅打印模态框内容？

方案一：通过CSS媒体查询控制打印范围 #

• 给ModalComponent的根容器添加唯一类名，比如print-modal
• 在全局样式文件中添加打印媒体查询规则，隐藏页面其他元素，仅保留模态框内容：

@media print {
  body * {
    visibility: hidden;
  }
  .print-modal, .print-modal * {
    visibility: visible;
  }
  .print-modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    margin: 0;
  }
}

• 在主组件的PrintModal方法中直接调用window.print()即可，打印时CSS会自动隐藏非模态框内容

方案二：克隆模态框到新窗口打印 #

如果CSS方案不生效，可通过DOM克隆的方式单独打印模态框：

• 给ModalComponent添加ref，比如<ModalComponent :active="active" ref="printModal"/>
• 实现PrintModal方法：

function PrintModal() {
  // 获取模态框DOM元素
  const modalElement = this.$refs.printModal.$el;
  // 克隆模态框节点（包含所有子元素和内容）
  const clonedModal = modalElement.cloneNode(true);

  // 创建新窗口
  const printWindow = window.open('', '_blank');
  // 写入基础HTML结构，引入原页面样式保证排版一致
  printWindow.document.write(`
    <html>
      <head>
        <title>打印模态框</title>
        <link rel="stylesheet" href="/your-project-styles.css">
      </head>
      <body>${clonedModal.outerHTML}</body>
    </html>
  `);
  printWindow.document.close();

  // 等待样式加载完成后执行打印，再关闭窗口
  setTimeout(() => {
    printWindow.print();
    printWindow.close();
  }, 300);
}

注意事项 #

• 确保打印时ModalComponent处于激活状态（active为true），否则未显示的模态框无法被打印
• 若使用Vue的scoped样式，需将模态框的打印相关样式提取到全局，或在新窗口中重新引入对应样式文件
• 测试时可先通过浏览器的打印预览功能查看效果，调整样式细节

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