打印时丢失外部CSS与Bootstrap样式问题求助

• 方法1：提取原页面样式注入打印窗口
  打印窗口是独立的浏览器上下文，无法直接读取原页面的外部CSS文件。可以通过JS把原页面的所有样式（包括Bootstrap）提取出来，插入到打印窗口的<head>中：

function printContent() {
  const printWindow = window.open('', '_blank');
  let styles = '';
  // 收集原页面所有样式表内容
  document.querySelectorAll('link[rel="stylesheet"], style').forEach(styleEl => {
    if (styleEl.tagName === 'LINK') {
      // 同步获取外部样式文件内容（注意同域要求，跨域需配置CORS）
      const xhr = new XMLHttpRequest();
      xhr.open('GET', styleEl.href, false);
      xhr.send();
      if (xhr.status === 200) {
        styles += `<style>${xhr.responseText}</style>`;
      }
    } else {
      styles += styleEl.outerHTML;
    }
  });
  // 获取目标打印内容
  const printHtml = document.getElementById('print-target').innerHTML;
  // 组装打印窗口HTML
  printWindow.document.write(`
    <html>
      <head>
        <title>打印预览</title>
        ${styles}
      </head>
      <body>${printHtml}</body>
    </html>
  `);
  printWindow.document.close();
  // 等待样式加载完成后执行打印
  printWindow.onload = () => {
    printWindow.print();
    printWindow.close();
  };
}

• 方法2：使用打印专用媒体查询
  直接在原页面中添加@media print规则，补充或覆盖Bootstrap的打印样式，无需新开窗口，直接调用浏览器原生打印功能：

<link rel="stylesheet" href="bootstrap.min.css">
<style>
  @media print {
    /* 自定义打印样式，确保布局适配纸张 */
    .container {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    /* 隐藏无需打印的元素 */
    .no-print {
      display: none !important;
    }
    /* 修复Bootstrap部分组件的打印样式 */
    .card {
      border: 1px solid #000 !important;
      break-inside: avoid;
    }
  }
</style>

对应的打印函数：

function printContent() {
  window.print();
}

• 方法3：用iframe承载打印内容
  创建隐藏iframe，将内容和样式注入其中后打印，避免新开窗口被浏览器拦截的问题：

function printContent() {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  
  // 复制原页面所有样式
  let styles = '';
  document.querySelectorAll('link[rel="stylesheet"], style').forEach(el => {
    styles += el.outerHTML;
  });
  
  iframeDoc.write(`
    <html>
      <head>${styles}</head>
      <body>${document.getElementById('print-target').innerHTML}</body>
    </html>
  `);
  iframeDoc.close();
  
  iframe.onload = () => {
    iframe.contentWindow.print();
    document.body.removeChild(iframe);
  };
}

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