Render .docx documents to Canvas, your way.

import { DocxViewer } from '@silurus/ooxml/docx';

// The built-in viewer tracks the current page for you.
const viewer = new DocxViewer(canvas, { width: 960, useGoogleFonts: true });
await viewer.load('/sample.docx');

nextBtn.addEventListener('click', () => viewer.nextPage());
prevBtn.addEventListener('click', () => viewer.prevPage());

import { DocxDocument } from '@silurus/ooxml/docx';

// Headless engine — render every page into a canvas you control.
const doc = await DocxDocument.load('/sample.docx');

for (let i = 0; i < doc.pageCount; i++) {
  const canvas = document.createElement('canvas');
  scroller.appendChild(canvas);
  await doc.renderPage(canvas, i, { width: 1100 });
}

import { DocxDocument } from '@silurus/ooxml/docx';

// Render each page small, wire up navigation.
const doc = await DocxDocument.load('/sample.docx');

for (let i = 0; i < doc.pageCount; i++) {
  const thumb = document.createElement('canvas');
  thumb.addEventListener('click', () => open(i));
  grid.appendChild(thumb);
  await doc.renderPage(thumb, i, { width: 320 });
}

import { DocxDocument, DocxViewer } from '@silurus/ooxml/docx';

// A large preview viewer on the right…
const viewer = new DocxViewer(detailCanvas, { width: 960, enableTextSelection: true });

// …and a thumbnail rail on the left, sharing the same file.
const [doc] = await Promise.all([
  DocxDocument.load('/sample.docx'),
  viewer.load('/sample.docx'),
]);

for (let i = 0; i < doc.pageCount; i++) {
  const thumb = document.createElement('canvas');
  thumb.addEventListener('click', () => viewer.goToPage(i));  // jump the preview
  rail.appendChild(thumb);
  await doc.renderPage(thumb, i, { width: 200 });
}