Angular Material：如何传递CSS样式至新窗口实现Div打印

我来帮你排查下这个问题——既然Bootstrap下能正常工作，说明你的核心打印逻辑是没问题的，问题大概率出在Angular Material的样式隔离机制，或者打印窗口的样式加载环节上，给你几个具体的解决方案：

1. 先确认Angular Material主题的全局导入是否正确 #

你把主题文件放到assets目录后，别只在index.html里加链接，建议在angular.json的styles数组里配置全局导入，这样Angular构建时会正确处理样式的作用域：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "src/assets/pink-bluegrey.css" // 加上这行
            ]
          }
        }
      }
    }
  }
}

配置完记得重启开发服务器，确保样式被正确注入到全局。

2. 修复打印窗口的样式加载问题 #

Angular的视图封装（ViewEncapsulation）会隔离组件样式，直接克隆Div内容到新窗口时，组件内的样式和全局Material主题样式可能没被带过去。你可以修改打印函数，手动把主题样式注入到打印窗口的里：

printDiv(divId: string) {
  const targetDiv = document.getElementById(divId);
  if (!targetDiv) return;

  const printWindow = window.open('', '', 'height=600,width=800');
  if (!printWindow) return;

  // 写入打印页面的HTML，手动引入Material主题和自定义打印样式
  printWindow.document.write(`
    <html>
      <head>
        <title>打印内容</title>
        <link rel="stylesheet" href="/assets/pink-bluegrey.css">
        <style>
          @media print {
            body { margin: 1rem; padding: 0; }
            /* 可以在这里补打印专属样式，比如隐藏不需要的元素 */
          }
        </style>
      </head>
      <body>${targetDiv.innerHTML}</body>
    </html>
  `);

  printWindow.document.close();
  printWindow.focus();
  setTimeout(() => {
    printWindow.print();
    printWindow.close();
  }, 500); // 给样式加载留一点时间
}

这里要注意路径的正确性，如果是生产环境部署，可能需要调整href为绝对路径，或者用Angular的DOCUMENT服务来获取基础路径。

3. 检查打印预览下的样式生效情况 #

打开浏览器开发者工具（F12），切换到打印预览模式（Ctrl+P后在开发者工具里选择"打印媒体"），检查目标元素的样式：

• 看看Material的类（比如mat-card、mat-form-field）是否有对应的样式规则
• 如果没有，说明主题样式没被加载到打印窗口，检查打印窗口里的样式链接是否能正常访问（可以直接在浏览器地址栏输入链接地址测试）

4. 用@media print强制补全缺失样式 #

有时候Material的默认样式在打印媒体查询下会被覆盖，你可以在全局样式文件里添加打印专属的样式，强制应用主题效果：

@media print {
  .mat-card {
    background-color: #ffffff !important;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !important;
    padding: 16px !important;
  }
  /* 其他需要强制生效的Material组件样式 */
}

按照这个步骤排查，应该能解决样式不生效的问题。

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