mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-03-22 23:30:36 +08:00
8f571ddc30
Fixes #14304 ## Summary This PR resolves an issue where images sometimes fail to appear when exporting or printing AFFiNE pages to PDF. The issue occurs because images may not finish loading inside the hidden print iframe before `window.print()` is triggered. ## Changes - Avoid using `display: none` for the print iframe and instead keep it hidden while remaining in the rendering tree to ensure resources load correctly. - Remove `loading="lazy"` from all images before printing to prevent viewport-based lazy loading from blocking image fetches. - Force image reload by reassigning the `src` attribute after removing lazy loading. - Add a `waitForImages` helper to ensure all images (including those inside Shadow DOM) finish loading before calling `window.print()`. - Improve reliability by checking both `img.complete` and `img.naturalWidth` to confirm successful image loading. - Wait for fonts using `document.fonts.ready` before triggering the print dialog. ## Verification 1. Run AFFiNE in development mode: npm run dev 2. Open a page containing multiple images. 3. Click **Print** and select **Save as PDF** (or any PDF printer). 4. Verify that all images appear correctly in the generated PDF. ## Notes This change focuses only on improving the reliability of the existing print-to-PDF workflow without altering any feature flags or export behavior. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved PDF export reliability by waiting for all images (including inside shadow content) and fonts to load before printing. * Removed lazy-loading interference so images reliably appear in exports. * Ensured styles and light-theme attributes are consistently applied to the print document. * **Improvements** * More robust print preparation using a hidden-but-rendering iframe document, deep-cloning content (flattening shadow DOM), and preserved canvas mapping for accurate renders. <!-- end of auto-generated comment: release notes by coderabbit.ai -->