Angular如何实现带CSS样式的HTML转PDF？解决window.print样式丢失问题

需要将页面内指定区域的内容导出为PDF，当前采用window.print()的方案时，导出的PDF完全丢失了原有CSS样式，和页面实际展示效果存在明显差异。 #

• 引用路径完全无效：代码中直接引入组件源码路径的./generate-pdf-description.component.scss，在Angular的构建流程中，SCSS文件会被编译为带哈希后缀的CSS片段，不存在可直接通过浏览器访问的原始SCSS资源，新打开的打印窗口根本加载不到这个文件。
• 媒体配置错误：原代码给样式链接设置media='screen'属性，这类样式仅会在屏幕渲染时生效，打印场景下不会被加载。
• 跨窗口样式隔离：Angular组件默认的视图封装机制会为组件样式添加唯一哈希类名，直接将打印区域的DOM结构写入新窗口时，没有同步导入当前页面已经加载完成的对应样式规则，自然会出现样式缺失。
• 代码存在拼写错误：原代码中配置弹窗尺寸时，把width=600错写为with=600，不会直接导致样式丢失，但会导致弹窗的尺寸配置完全失效。
• 打印时机错误：原代码在写入内容后直接调用打印方法，没有等待窗口内的资源完全加载，也会导致样式渲染不完整。

核心思路是不手动引用外部样式文件，直接从当前已渲染完成的页面中提取所有生效的样式内容，注入到新打开的打印窗口中，同时调整打印触发时机，确保内容加载完成后再执行打印。

修复后的组件代码 #

generatePDFDescription(): void {
  const printElement = document.getElementById('print-section');
  // 提取当前页面所有已内联加载的样式内容
  const inlineStyles = Array.from(document.querySelectorAll('style'))
    .map(style => style.innerHTML)
    .join('');
  // 提取当前页面所有已加载的外部样式表链接
  const externalStyleLinks = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
    .map(link => link.outerHTML)
    .join('');

  const printWindow = window.open('', 'PRINT', 'height=400,width=600');
  printWindow.document.write(`
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <style>${inlineStyles}</style>
        ${externalStyleLinks}
      </head>
      <body>
        ${printElement.innerHTML}
      </body>
    </html>
  `);
  printWindow.document.close();
  // 等待打印窗口内容完全加载后再触发打印，避免样式未渲染就打印
  printWindow.onload = () => {
    printWindow.focus();
    printWindow.print();
  };
}

• 如果需要避免页面全局样式干扰打印效果，可以单独提取打印区域对应的样式规则，只注入必要的样式到打印窗口。
• 打印逻辑需要放在用户点击事件的同步回调中执行，避免异步操作触发浏览器的弹窗拦截规则。
• 如果使用独立的打印样式表，需要将样式表的media属性设置为print，确保打印场景下样式正常加载。

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