如何在打印PDF页面时保留元素的CSS属性（如文字颜色）？

问题根因 #

你当前代码打印丢失样式的核心原因有两点：

• 新打开的打印空白窗口没有加载原页面的CSS规则，仅写入了纯HTML结构
• 直接读取textarea的innerHTML无法完整保留元素本身的样式属性

修复方案 #

修改后的JS代码 #

function printDiv() {
  // 全量提取原页面样式规则，兼容内部样式和同域外部样式
  const allStyles = Array.from(document.styleSheets)
    .map(sheet => {
      try {
        return Array.from(sheet.cssRules).map(rule => rule.cssText).join('')
      } catch (err) {
        // 跨域样式表无法读取直接跳过，可手动补充对应样式
        return ''
      }
    }).join('')

  const printWindow = window.open('', '', 'height=500, width=500')
  printWindow.document.write(`
    <html>
      <head>
        <style>
          ${allStyles}
          /* 可额外添加打印专属样式 */
          @media print {
            body { margin: 1.5rem; }
          }
        </style>
      </head>
      <body>
        <h1>Div contents are <br>
        ${document.getElementById('box2text').outerHTML}
      </body>
    </html>
  `)
  printWindow.document.close()
  // 等待样式加载完成后再触发打印，避免样式未生效
  printWindow.addEventListener('load', () => {
    printWindow.print()
    printWindow.close()
  })
}

注意事项 #

• 如果你的样式存放在跨域的外部CSS文件中，无法通过上述方法自动提取，可以把需要用到的文字颜色、字体、间距等样式直接写在打印窗口的style标签内即可
• 不需要修改原有HTML结构
• 如需针对打印场景调整样式，直接在@media print代码块中编写对应规则即可

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