为什么使用window.print打印的页面只有第一页。其他页面没有了。并且我希望打印的是一个弹窗的内容，竟然把弹窗的样式边框和打印的按钮都打印进去了

夏天想2026-01-16 15:41

可以单独的设置打印的样式、

复制代码

@media print {
  @page {
    size: A4;//默认A4的纸张
    margin: 10mm; /* 上下左右 10mm */
  }
  body {
    height: auto !important; //不设置高度。避免只有一页
    padding: 0 !important;
    margin: 0 !important;
    overflow: auto !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
.print-no{
   display:none;//在打印的时候不显示
 }
}

但是发现设置了之后不起作用。或许是你放在style的scoped里面了。拿出来试试。

如果想使用插件推荐使用

复制代码

vue3-print-nb

如果你不想使用插件，推荐做法：使用独立的打印容器 + 全局打印样式隐藏非打印内容。

复制代码

const handlePrint = () => {
  const printContent = document.querySelector('.print-container').cloneNode(true); //print-container是你要打印的html的class标签

  // 创建一个干净的打印窗口容器
  const printWindow = window.open('', '_blank');
  printWindow.document.write(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>打印</title>
        <style>
          body {
            font-family: SimSun, "宋体", serif;
            font-size: 12pt;
            line-height: 1.3;
            margin: 0;
            padding: 10mm;
            background: #fff !important;
          }
          /* 这里可以内联你原有的打印样式 */
          .print-table { width: 100%; border-collapse: collapse; }
          .print-table td { border: 0.5pt solid #000; padding: 4pt 6pt; }
  
          /* 其他必要样式... */
        </style>
      </head>
      <body>
        ${printContent.outerHTML}
      </body>
    </html>
  `);
  printWindow.document.close();
  printWindow.focus();

  // 等待加载完成再打印（可选）
  printWindow.onload = () => {
    printWindow.print();
    printWindow.close(); // 可选：打印后自动关闭
  };
};

✅ 优点：完全脱离当前页面上下文，不会受弹窗、遮罩、全局样式干扰。还可以单独的设置样式。