Header/Footer Logos and images not showing on every page + Watermark only appears on first page in Univer Docs (overflowing)

[abhishekrajput-web]

Hi Univer team and community! 👋
We are building a DOCX viewer/editor using Univer Docs and facing two issues with multi-page documents.
We have attached three files for reference:

PDF file — contains all our code for headers, drawings, and watermark.
Word file (.docx) — the original document we uploaded.
Screenshot — shows how it currently appears in Univer canvas view.

Issue 1: Header and Footer Logos/Images not showing

Header and footer text renders correctly on every page.
However, the logos/images inside the header and footer are not visible on any page in the canvas.

Issue 2: Watermark only shows on the first page
The watermark only appears on the first page and does not repeat on other pages when scrolling.
(Note: The watermark works correctly on every page when exported to PDF.)

Our Setup

Packages: @univerjs/preset-docs-core + @univerjs/preset-docs-drawing + @univerjs/watermark
documentFlavor: 1 (TRADITIONAL)
Using createUniver() preset mode
React app

Could you please help us fix these two issues? Any guidance or workaround would be greatly appreciated.
Thanks so much!

e79bbd96-3228-4c28-b21b-6098c917b2ba_Untitled.pdf
University_Academic_Report_2025.docx

[VectorPeak]

Thanks for the detailed repro and screenshots. The important detail I notice is that the header/footer text is participating in the page layout, but the visual elements behave differently: the logo appears as a drawing/image layer rather than normal header text, and the watermark looks like it is being painted once in the canvas layer instead of being repeated per rendered page. That usually points to two separate paths in Univer Docs: document text/layout vs drawing/watermark rendering.

For the header/footer logos, the first thing I would check is whether the images from the .docx are imported as drawings attached to the header/footer, or only as body drawings. In DOCX these are often stored under header/footer relationships, and they may be represented as floating anchors rather than inline images. Header/footer text can render fine while header/footer drawings are still unsupported or not attached to the active page rendering context.

A practical way to narrow it down is to inspect the Univer document snapshot after import and confirm where the image data lands:

const doc = univerAPI.getActiveDocument?.();
const snapshot = doc?.getSnapshot?.();

console.log(snapshot?.body?.customBlocks);
console.log(snapshot?.headers);
console.log(snapshot?.footers);
console.log(snapshot?.drawings);
console.log(snapshot?.drawingsOrder);

The exact accessors may differ depending on your wrapper, but the goal is to confirm whether the header/footer logo exists in the imported model at all. If the image exists in the body drawings collection but is not referenced by the header/footer model, the canvas renderer will not know to repeat it on every page header/footer. If it is not present at all, then the DOCX import path is dropping header/footer drawing relationships.

For a workaround, I would avoid relying on DOCX header/footer images for now and render those logos as a per-page overlay in your viewer layer. Since your header text already repeats correctly, you can use the same page bounds/margins and draw the logo at a fixed header/footer position for each visible page. This is also safer for logos because it avoids inline-flow differences between Word, PDF export, and canvas rendering.

For the watermark, the screenshot suggests it is being treated as one drawing/overlay on the first page, not as page background decoration. PDF export working on every page is a useful clue: the export pipeline is likely applying watermark semantics per page, while the interactive canvas renderer is only applying the watermark object once. I would not model the watermark as a single body drawing if you need it visible during scrolling. Instead, duplicate/apply the watermark per page or hook into the document render layer and paint it for every page viewport.

Conceptually the workaround looks like this:

// Pseudo-code: render overlay per page, not one document-level drawing.
for (const page of visiblePages) {
 drawWatermark({
 pageIndex: page.index,
 x: page.left + page.width / 2,
 y: page.top + page.height / 2,
 text: 'Spanning',
 rotation: -45,
 opacity: 0.12,
 zIndex: 'behindText',
 });
}

A few details are worth checking because they commonly cause this exact behavior:

• Ensure @univerjs/preset-docs-drawing is registered before loading the document data, not after the document is already created.
• Confirm the DOCX image type is supported in the browser renderer. If the source DOCX uses EMF/WMF/VML or older WordArt-style watermark drawings, convert the logo/watermark to PNG/JPEG in the DOCX as a test.

---

If my answer solved your problem, you can click answered the question. I'm really here to help, and along the way I'm also collecting Galaxy Brain badges haha 😆