如何复制DOM元素的全部CSS样式？Angular4打印场景技术求助

我之前碰到过一模一样的情况——直接复制innerHTML到新窗口确实会丢样式，尤其是用Angular这类有样式封装机制的框架，加上Teradata Covalent的组件样式本身可能也是封装好的，难怪格式会乱。给你几个适配Angular 4 + Covalent场景的解决方案，按推荐程度排序：

方案1：用CSS媒体查询直接在原页面打印（最推荐） #

这个方法不用新开窗口，直接利用浏览器的打印媒体查询，只显示目标DIV，完全保留原页面的所有样式，简单又靠谱。

步骤： #

1. 在你的组件CSS（或者全局样式文件）里添加打印专用样式：

@media print {
  /* 隐藏页面上所有非目标元素 */
  body * {
    visibility: hidden;
  }
  /* 只显示目标DIV及其内部所有元素 */
  #formTerms, #formTerms * {
    visibility: visible;
  }
  /* 把目标DIV定位到页面顶部，避免打印空白 */
  #formTerms {
    position: absolute;
    left: 0;
    top: 0;
  }
}

2. 修改你的printForm方法，直接调用浏览器打印：

printForm(): void {
  window.print();
}

这样打印的时候，浏览器会自动应用媒体查询的样式，完美保留原DIV的所有格式，包括Covalent组件的样式。

方案2：新开窗口时复制所有关联样式 #

如果一定要新开窗口（比如需要单独保存HTML到数据库），可以把原页面的所有样式表（包括内联样式、外部样式和Angular组件样式）都复制到新窗口里。

修改后的printForm方法： #

printForm(): void {
  const targetDiv = document.getElementById('formTerms');
  if (!targetDiv) return;
  
  const printContents = targetDiv.innerHTML;
  const newWindow = window.open();
  if (!newWindow) return;

  // 收集原页面所有样式规则
  let allStyles = '';
  Array.from(document.styleSheets).forEach(styleSheet => {
    try {
      // 处理内联样式表
      if (styleSheet.cssRules) {
        Array.from(styleSheet.cssRules).forEach(rule => {
          allStyles += rule.cssText + '\n';
        });
      }
      // 处理外部样式表，添加link标签
      else if (styleSheet.href) {
        allStyles += `<link rel="stylesheet" href="${styleSheet.href}">\n`;
      }
    } catch (error) {
      // 跨域的外部样式表可能无法访问，跳过即可
      console.warn('无法加载样式表:', styleSheet.href);
    }
  });

  // 写入完整的HTML结构，包含样式和目标内容
  newWindow.document.write(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>打印内容</title>
        <style>${allStyles}</style>
      </head>
      <body>
        ${printContents}
        <script>
          window.onload = function() {
            window.print();
            window.close();
          };
        </script>
      </body>
    </html>
  `);
  
  newWindow.document.close();
  newWindow.focus();
}

注意事项： #

• 因为Angular默认开启了ViewEncapsulation（样式封装），组件内部的样式不会泄露到全局。如果目标DIV是组件内的元素，你需要在组件元数据里设置encapsulation: ViewEncapsulation.None，或者用::ng-deep前缀让组件样式全局生效，这样新窗口才能获取到这些样式。
• 跨域的外部样式表可能无法读取，这时候可以手动把这些样式复制到全局样式文件里，或者直接写入新窗口的<style>标签中。

方案3：提取元素的计算样式（适合简单场景） #

如果目标DIV的样式都是内联或者可以通过getComputedStyle获取的，也可以把每个元素的计算样式复制成内联样式，但这种方法比较繁琐，复杂组件（比如Covalent的组件）可能会漏样式，不推荐用于复杂页面。

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