toeverything/AFFiNE · error

css cannot be applied when printing pdf, this may be because

Error message

css cannot be applied when printing pdf, this may be because of CORS policy from its domain.

What it means

Warning logged in `printToPdf` when copying document stylesheets into the print iframe throws — typically a DOMException from reading `element.cssRules` of a cross-origin stylesheet blocked by CORS. Some print CSS may be missing so the PDF may render without those styles, but printing continues with the styles that could be copied.

Source

Thrown at blocksuite/affine/shared/src/utils/print-to-pdf.ts:124

                color: #000 !important;
                -webkit-text-fill-color: #000 !important;
              }
              :root {
                --affine-note-shadow-box: none !important;
                --affine-note-shadow-sticker: none !important;
              }
            }</style></head><body></body></html>`);

      // copy all styles to iframe
      for (const element of document.styleSheets) {
        try {
          for (const cssRule of element.cssRules) {
            const target = doc.styleSheets[0];
            target.insertRule(cssRule.cssText, target.cssRules.length);
          }
        } catch (e) {
          if (element.href) {
            console.warn(
              'css cannot be applied when printing pdf, this may be because of CORS policy from its domain.',
              element.href
            );
          } else {
            reject(e);
          }
        }
      }

      // Recursive function to find all canvases, including those in shadow roots
      const findAllCanvases = (root: Node): HTMLCanvasElement[] => {
        const canvases: HTMLCanvasElement[] = [];
        const traverse = (node: Node) => {
          if (node instanceof HTMLCanvasElement) {
            canvases.push(node);
          }
          if (node instanceof HTMLElement || node instanceof ShadowRoot) {
            node.childNodes.forEach(traverse);

View on GitHub (pinned to b4c8548c09)

Solutions

  1. Serve the stylesheet from the same origin or with CORS headers.
  2. Inline critical CSS before printing.
Defensive patterns

Strategy: try-catch

When it happens

Trigger: Triggered during print-to-PDF when reading cssRules of a cross-origin stylesheet throws a SecurityError, so that stylesheet's rules cannot be copied into the print iframe.

Common situations: Occurs when printing a page that loads CSS from another domain without CORS headers. The printed output may miss some styles; serve the stylesheet same-origin or with CORS enabled.


AI-assisted analysis of toeverything/AFFiNE@b4c8548c09 (2026-08-18). Data as JSON: /api/errors/459059cb24ab906d. Report an issue: GitHub.