Angular 16+Capacitor移动端打印预览功能问题求助

方法1：手动内联组件样式 #

将组件SCSS编译后的CSS内容直接嵌入到打印的HTML结构中，确保样式被包含。

1. 把组件的样式导入为字符串（需配置Angular CLI支持）：

// 组件中导入SCSS为字符串
import componentStyles from './print-component.component.scss?raw';

@Component({
  selector: 'app-print',
  templateUrl: './print.component.html',
  styleUrls: ['./print.component.scss']
})
export class PrintComponent {
  @ViewChild('printContent') printContent!: ElementRef;

  async handlePrint() {
    const html = this.printContent.nativeElement.innerHTML;
    // 构造完整的HTML文档并内嵌样式
    const fullPrintContent = `
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="UTF-8">
          <style>${componentStyles}</style>
        </head>
        <body>${html}</body>
      </html>
    `;
    await Printer.print({ content: fullPrintContent });
  }
}

2. 配置Angular CLI支持raw-loader：在angular.json的architect.build.options中添加规则：

{
  "assets": [...],
  "styles": [...],
  "scripts": [],
  "resolveJsonModule": true,
  "allowSyntheticDefaultImports": true,
  "rules": [
    {
      "test": /\.scss$/,
      "resourceQuery": /raw/,
      "type": "asset/source"
    }
  ]
}

方法2：自动提取组件封装样式 #

利用Angular默认的样式封装机制，自动提取组件对应的样式规则：

@Component({
  selector: 'app-print',
  templateUrl: './print.component.html',
  styleUrls: ['./print.component.scss']
})
export class PrintComponent {
  @ViewChild('printContent') printContent!: ElementRef;

  private getComponentStyles(element: HTMLElement): string {
    const styleRules: string[] = [];
    // 获取组件元素的ngcontent属性标识
    const ngContentAttr = element.getAttributeNames().find(attr => attr.startsWith('_ngcontent'));
    if (!ngContentAttr) return '';

    // 遍历所有样式表，筛选当前组件的样式规则
    for (const sheet of Array.from(document.styleSheets)) {
      try {
        const rules = Array.from(sheet.cssRules) as CSSStyleRule[];
        rules.forEach(rule => {
          if (rule.selectorText?.includes(ngContentAttr)) {
            styleRules.push(`${rule.selectorText} { ${rule.style.cssText} }`);
          }
        });
      } catch (e) {
        // 忽略跨域样式表（如第三方CDN资源）
        continue;
      }
    }
    return styleRules.join('\n');
  }

  async handlePrint() {
    const element = this.printContent.nativeElement;
    const html = element.innerHTML;
    const componentStyles = this.getComponentStyles(element);
    
    const fullPrintContent = `
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="UTF-8">
          <style>${componentStyles}</style>
        </head>
        <body>${html}</body>
      </html>
    `;
    await Printer.print({ content: fullPrintContent });
  }
}

该方法会自动匹配Angular为组件生成的带属性选择器的样式规则，无需手动维护样式字符串。

方法3：使用全局样式替代组件样式 #

如果组件样式逻辑简单，可将SCSS内容移至全局样式文件（如styles.scss），让打印的HTML直接继承全局样式。注意此方法可能造成样式污染，仅适合简单场景。

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