عارض

<!-- once, in your bundled app code: import "@aared/viewer/element"; -->
<aared-viewer
  src="./post-production-review.pptx">
</aared-viewer>

<!-- once, in your bundled app code: import "@aared/viewer/element"; -->
<aared-viewer
  src="./post-production-tracker.xlsx"
  style="height: 480px">
</aared-viewer>

<!-- once, in your bundled app code: import "@aared/viewer/element"; -->
<aared-viewer
  src="./docx-coverage.docx"
  style="height: 480px">
</aared-viewer>

import { usePptx } from "@aared/viewer/react";

function Slide({ file }: { file: string | File }) {
  const { ref } = usePptx({ source: file });
  return <div ref={ref} />;
}

import { useXlsx } from "@aared/viewer/react";

function Sheet({ file }: { file: string | File }) {
  const { ref } = useXlsx({ source: file });
  return <div ref={ref} style={{ height: 480 }} />;
}

import { useDocx } from "@aared/viewer/react";

function Doc({ file }: { file: string | File }) {
  const { ref } = useDocx({ source: file });
  return <div ref={ref} style={{ height: 480, overflow: "auto" }} />;
}

import { preview } from "@aared/viewer/pptx";

const viewer = await preview({ source: file, target: el });

// When you're done
viewer.destroy();

import { preview } from "@aared/viewer/xlsx";

const viewer = await preview({ source: file, target: el, zoom: 0.7 });

// When you're done
viewer.destroy();

import { preview } from "@aared/viewer/docx";

const viewer = await preview({ source: file, target: el, zoom: 0.65 });

// When you're done
viewer.destroy();