Open File Viewer

https://github.com/xushanpei/open-file-viewer
Admin
Open File Viewer is a container-first file preview SDK for modern web applications. It brings PDFs,...
Tokens:13,047
Snippets:163
Trust Score:9.1
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Quick Start implementation

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/svelte/README.md

Basic setup for the OpenFileViewer component with common plugins.

```svelte
<script lang="ts">
  import { OpenFileViewer } from "@open-file-viewer/svelte";
  import {
    imagePlugin,
    officePlugin,
    pdfPlugin,
    textPlugin
  } from "@open-file-viewer/core";
  import "@open-file-viewer/core/style.css";
  import pdfWorkerSrc from "pdfjs-dist/build/pdf.worker.mjs?url";

  export let file: File;

  const plugins = [
    imagePlugin(),
    textPlugin(),
    pdfPlugin({ workerSrc: pdfWorkerSrc }),
    officePlugin()
  ];
</script>

<OpenFileViewer
  {file}
  fileName={file.name}
  width="100%"
  height="640px"
  fit="contain"
  toolbar
  theme="auto"
  {plugins}
/>
```

--------------------------------

### Install Framework Adapters

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Install the specific adapter package for your framework of choice.

```bash
npm install @open-file-viewer/react
npm install @open-file-viewer/vue
npm install @open-file-viewer/svelte
```

--------------------------------

### Quick Start with OpenFileViewer

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/vue/README.md

Basic implementation of the OpenFileViewer component in a Vue setup script.

```vue
<script setup lang="ts">
import { OpenFileViewer } from "@open-file-viewer/vue";
import {
  imagePlugin,
  officePlugin,
  pdfPlugin,
  textPlugin
} from "@open-file-viewer/core";
import "@open-file-viewer/core/style.css";
import pdfWorkerSrc from "pdfjs-dist/build/pdf.worker.mjs?url";

defineProps<{ file: File }>();

const plugins = [
  imagePlugin(),
  textPlugin(),
  pdfPlugin({ workerSrc: pdfWorkerSrc }),
  officePlugin()
];
</script>

<template>
  <OpenFileViewer
    :file="file"
    :file-name="file.name"
    width="100%"
    height="640px"
    fit="contain"
    toolbar
    theme="auto"
    :plugins="plugins"
  />
</template>
```

--------------------------------

### Install @open-file-viewer/core

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Install the core package via npm.

```bash
npm install @open-file-viewer/core
```

--------------------------------

### Install dependencies

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/svelte/README.md

Commands to install the core library and the Svelte adapter.

```bash
npm install @open-file-viewer/core @open-file-viewer/svelte
```

--------------------------------

### Install Core and Framework Packages

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Install the core library and framework-specific adapters using pnpm.

```bash
pnpm add @open-file-viewer/core
```

```bash
pnpm add @open-file-viewer/core @open-file-viewer/react
```

```bash
pnpm add @open-file-viewer/core @open-file-viewer/vue
```

```bash
pnpm add @open-file-viewer/core @open-file-viewer/svelte
```

--------------------------------

### Install dependencies

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/vue/README.md

Install the core package and the Vue adapter.

```bash
npm install @open-file-viewer/core @open-file-viewer/vue
```

--------------------------------

### Initialize Viewer Configuration

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/index.html

Example of a basic viewer configuration using the theme option.

```javascript
createViewer({ theme: "auto" })
```

--------------------------------

### Install dependencies

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/react/README.md

Commands to install the core library, React adapter, and optional PDF support.

```bash
npm install @open-file-viewer/core @open-file-viewer/react
```

```bash
npm install pdfjs-dist
```

--------------------------------

### Install Open File Viewer packages

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

Install the core package and the necessary framework-specific adapters via npm.

```bash
npm install @open-file-viewer/core
npm install @open-file-viewer/react
npm install @open-file-viewer/vue
npm install @open-file-viewer/svelte
```

--------------------------------

### Install via Alternative Package Managers

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Alternative installation commands for npm and yarn.

```bash
npm install @open-file-viewer/core
```

```bash
yarn add @open-file-viewer/core
```

--------------------------------

### Install Core Package

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/index.html

Command to install the core library via npm.

```bash
$ npm install @open-file-viewer/core
```

--------------------------------

### Install PDF support

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/vue/README.md

Install the required pdfjs-dist dependency for PDF preview functionality.

```bash
npm install pdfjs-dist
```

--------------------------------

### Install CAD dependencies

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Install the required packages for WebGL CAD rendering.

```bash
npm install @mlightcad/cad-simple-viewer@1.5.9 @mlightcad/data-model@1.12.3 lodash-es@4.17.21
```

--------------------------------

### Initialize local development environment

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Commands to install dependencies and verify the project integrity.

```bash
pnpm install
pnpm check
```

--------------------------------

### Install Optional Dependencies

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

Run these commands to install the necessary packages for PDF, DWG, and FLV/M2TS support.

```bash
npm install pdfjs-dist
npm install @mlightcad/cad-simple-viewer@1.5.9 @mlightcad/data-model@1.12.3 lodash-es@4.17.21
npm install @mlightcad/libredwg-web@0.7.4
npm install mpegts.js
```

--------------------------------

### Initialize Open File Viewer

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Basic setup for the viewer instance including all available plugins and container configuration.

```ts
import {
  createViewer,
  imagePlugin,
  videoPlugin,
  audioPlugin,
  textPlugin,
  pdfPlugin,
  officePlugin,
  archivePlugin,
  emailPlugin,
  drawingPlugin,
  xmindPlugin,
  cadPlugin,
  model3dPlugin,
  gisPlugin,
  fallbackPlugin
} from "@open-file-viewer/core";
import "@open-file-viewer/core/style.css";
import pdfWorkerSrc from "pdfjs-dist/build/pdf.worker.mjs?url";

const viewer = createViewer({
  container: "#viewer",
  file: fileOrUrl,
  fileName: "contract.pdf",
  width: "100%",
  height: "70vh",
  fit: "contain",
  toolbar: true,
  theme: "auto",
  plugins: [
    imagePlugin(),
    videoPlugin(),
    audioPlugin(),
    textPlugin(),
    pdfPlugin({ workerSrc: pdfWorkerSrc }),
    officePlugin(),
    archivePlugin(),
    emailPlugin(),
    drawingPlugin(),
    xmindPlugin(),
    cadPlugin(),
    model3dPlugin(),
    gisPlugin(),
    fallbackPlugin()
  ]
});

viewer.resize();
viewer.destroy();
```

--------------------------------

### Quick start with FileViewer

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/react/README.md

Basic implementation of the FileViewer component with standard plugins and configuration.

```tsx
import { FileViewer } from "@open-file-viewer/react";
import {
  imagePlugin,
  officePlugin,
  pdfPlugin,
  textPlugin
} from "@open-file-viewer/core";
import "@open-file-viewer/core/style.css";
import pdfWorkerSrc from "pdfjs-dist/build/pdf.worker.mjs?url";

const plugins = [
  imagePlugin(),
  textPlugin(),
  pdfPlugin({ workerSrc: pdfWorkerSrc }),
  officePlugin()
];

export function AttachmentPreview({ file }: { file: File }) {
  return (
    <FileViewer
      file={file}
      fileName={file.name}
      width="100%"
      height="640px"
      fit="contain"
      toolbar
      theme="auto"
      plugins={plugins}
    />
  );
}
```

--------------------------------

### Install LibreDWG Web dependency

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Install the required pinned version of the LibreDWG Web package.

```bash
npm install @mlightcad/libredwg-web@0.7.4
```

--------------------------------

### Install mpegts.js dependency

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Install mpegts.js to enable support for FLV and MPEG-TS/M2TS playback.

```bash
npm install mpegts.js
```

--------------------------------

### Integrate Open File Viewer with Vue

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

Implements the OpenFileViewer component using Vue's script setup syntax. Requires passing the file and plugins as props.

```vue
<script setup lang="ts">
import { OpenFileViewer } from "@open-file-viewer/vue";
import { imagePlugin, officePlugin, pdfPlugin, textPlugin } from "@open-file-viewer/core";
import "@open-file-viewer/core/style.css";

defineProps<{ file: File }>();
const plugins = [imagePlugin(), pdfPlugin({ workerSrc }), officePlugin(), textPlugin()];
</script>

<template>
  <OpenFileViewer
    :file="file"
    :file-name="file.name"
    height="640px"
    toolbar
    :plugins="plugins"
  />
</template>
```

--------------------------------

### Project directory structure

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Overview of the monorepo organization including core packages, framework adapters, and examples.

```txt
packages/
  core/      # Framework-agnostic preview core and plugins
  react/     # React adapter
  vue/       # Vue adapter
  svelte/    # Svelte adapter
examples/
  vanilla/   # Vanilla JavaScript example
  react/     # React example
  vue/       # Vue example
  svelte/    # Svelte example
doc/         # Website and online experience
```

--------------------------------

### Install PDF Plugin Dependency

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Required dependency when using the pdfPlugin() for PDF rendering.

```bash
pnpm add pdfjs-dist
```

--------------------------------

### Integrate with Vue

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Use the OpenFileViewer component within a Vue 3 script setup block.

```vue
<script setup lang="ts">
import { OpenFileViewer } from "@open-file-viewer/vue";
import { imagePlugin, pdfPlugin, officePlugin, textPlugin } from "@open-file-viewer/core";
import "@open-file-viewer/core/style.css";
import pdfWorkerSrc from "pdfjs-dist/build/pdf.worker.mjs?url";

defineProps<{ file: File }>();

const plugins = [
  imagePlugin(),
  textPlugin(),
  pdfPlugin({ workerSrc: pdfWorkerSrc }),
  officePlugin()
];
</script>

<template>
  <OpenFileViewer
    :file="file"
    :file-name="file.name"
    width="100%"
    height="640px"
    fit="contain"
    toolbar
    theme="auto"
    :plugins="plugins"
  />
</template>
```

--------------------------------

### Site Boot Initialization Script

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/index.html

Initializes the site theme and boot state from local storage to prevent flash of unstyled content.

```javascript
(() => { const root = document.documentElement; root.dataset.siteBoot = "loading"; root.dataset.motion = "on"; try { const theme = localStorage.getItem("ofv-site-theme") === "light" ? "light" : "dark"; root.dataset.siteTheme = theme; } catch { root.dataset.siteTheme = "dark"; } window.setTimeout(() => { if (root.dataset.siteBoot === "loading") { root.dataset.siteBoot = "timeout"; delete root.dataset.motion; } }, 1600); })();
```

--------------------------------

### Common development and build commands

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Standard scripts for running development servers, testing, and building the project components.

```bash
pnpm dev:doc
pnpm dev:vanilla
pnpm dev:react
pnpm dev:vue
pnpm dev:svelte
pnpm test
pnpm typecheck
pnpm build
pnpm build:examples
pnpm build:doc
pnpm pack:check
```

--------------------------------

### Theme and Boot CSS Configuration

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/index.html

Defines CSS variables and styles for light/dark mode switching and loading state visibility.

```css
:root { color-scheme: dark; background: #05060e; } :root[data-site-theme="light"] { color-scheme: light; background: #f6f7fb; } html, body { min-height: 100%; background-color: #05060e; } :root[data-site-theme="light"] body { background-color: #f6f7fb; } :root[data-site-boot="loading"] body { visibility: hidden; } :root[data-site-boot="loading"] *, :root[data-site-boot="loading"] *::before, :root[data-site-boot="loading"] *::after { animation-play-state: paused !important; transition: none !important; }
```

--------------------------------

### Initialize CAD plugin

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Configure the cadPlugin with the paths to the hosted LibreDWG assets.

```ts
cadPlugin({
  libreDwg: {
    wasmBaseUrl: "/vendor/libredwg-web/wasm",
    workerModuleUrl: "/vendor/libredwg-web/dist/libredwg-web.js",
    workerTimeoutMs: 120_000
  }
});
```

--------------------------------

### Create Viewer Instance (TypeScript)

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/test-assets/test.md

Instantiates a new viewer with specified container, file, theme, and toolbar options. Requires importing the createViewer function.

```typescript
import { createViewer } from "@open-file-viewer/core";

const viewer = createViewer({
  container: "#viewer-container",
  file: myFile,
  theme: "auto",
  toolbar: true
});
```

--------------------------------

### Configure PDF Plugin for Compatibility

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Enable useFetchData to resolve PDF loading issues in specific build environments like Umi Max.

```ts
pdfPlugin({
  workerSrc: pdfWorkerSrc,
  useFetchData: true
});
```

--------------------------------

### Integrate Open File Viewer with Vanilla JS

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

Initializes the viewer using the createViewer factory function. Requires importing the core styles and configuring necessary plugins.

```typescript
import {
  createViewer,
  imagePlugin,
  officePlugin,
  pdfPlugin,
  textPlugin
} from "@open-file-viewer/core";
import "@open-file-viewer/core/style.css";
import workerSrc from "pdfjs-dist/build/pdf.worker.mjs?url";

const viewer = createViewer({
  container: "#viewer",
  file,
  fileName: file.name,
  height: "70vh",
  theme: "auto",
  toolbar: true,
  plugins: [
    imagePlugin(),
    pdfPlugin({ workerSrc }),
    officePlugin(),
    textPlugin()
  ]
});
```

--------------------------------

### Instance Methods

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

Methods available on the viewer instance to control file navigation, state, and lifecycle.

```APIDOC
## reload(file?)

### Description
Reload the current file or replace it with a new source.

### Signature
`reload(file?: any): Promise<void>`

## next()

### Description
Move to the next file in the queue.

### Signature
`next(): Promise<void>`

## previous()

### Description
Move to the previous file in the queue.

### Signature
`previous(): Promise<void>`

## goTo(index)

### Description
Move to a specific queue index.

### Signature
`goTo(index: number): Promise<void>`

## getCurrentIndex()

### Description
Return the current queue index.

### Signature
`getCurrentIndex(): number`

## resize()

### Description
Ask the active plugin to recalculate after the container size changes.

### Signature
`resize(): void`

## destroy()

### Description
Destroy the viewer and release event listeners and plugin resources.

### Signature
`destroy(): void`
```

--------------------------------

### Initialize PDF Plugin with Fetch Data

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

Enable useFetchData to resolve compatibility issues with PDF workers in certain environments.

```typescript
pdfPlugin({
  workerSrc,
  useFetchData: true
});
```

--------------------------------

### Configure LibreDWG WASM

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Set up the LibreDWG WASM paths for CAD preview.

```ts
cadPlugin({
  libreDwg: {
    wasmBaseUrl: "/vendor/libredwg-web/wasm",
    workerModuleUrl: "/vendor/libredwg-web/dist/libredwg-web.js"
  }
});
```

--------------------------------

### Import Stylesheet

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Include the required CSS file once in your application entry point.

```ts
import "@open-file-viewer/core/style.css";
```

--------------------------------

### Initialize the file viewer

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

The createViewer function initializes the viewer instance with the provided PreviewOptions.

```ts
createViewer(options: PreviewOptions): FileViewer;
```

--------------------------------

### Initialize CAD Plugin

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

Configure the cadPlugin with paths to the engine loader and worker assets.

```typescript
cadPlugin({
  webglDwg: {
    // Host-owned loading keeps non-CAD builds free of the optional engine
    // and gives strict esbuild resolution an explicit import.
    engineLoader: () => import("@mlightcad/cad-simple-viewer"),
    workerBaseUrl: "/vendor/cad-engine"
  },
  libreDwg: {
    wasmBaseUrl: "/vendor/libredwg-web/wasm",
    workerModuleUrl: "/vendor/libredwg-web/dist/libredwg-web.js",
    workerTimeoutMs: 120_000
  }
});
```

--------------------------------

### createViewer(options)

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

Initializes a new file viewer instance within a specified container. This function accepts an options object to configure the viewer's behavior, appearance, and file sources.

```APIDOC
## createViewer(options)

### Description
Initializes the file viewer component. This function mounts the viewer to a specified container and handles file rendering based on the provided options.

### Parameters
- **container** (HTMLElement | string) - Required - The viewer mount element; string values are resolved with document.querySelector.
- **file** (File | Blob | string | ArrayBuffer) - Optional - Single-file source.
- **files** (PreviewSource | PreviewItem[]) - Optional - Multi-file queue for navigation.
- **initialIndex** (number) - Optional - Initial queue index.
- **fileName** (string) - Optional - Recommended for format detection when source is not a File.
- **mimeType** (string) - Optional - MIME type for Blob, ArrayBuffer or remote URLs.
- **width / height** (number | string) - Optional - Viewer dimensions.
- **fit** (string) - Optional - Content fitting mode (contain, cover, width, height, actual, scale-down).
- **plugins** (PreviewPlugin[]) - Optional - Ordered list of plugins.
- **fallback** (string) - Optional - Fallback strategy (inline, download, custom).
- **toolbar** (boolean | PreviewToolbarOptions) - Optional - Toolbar configuration.
- **theme** (string) - Optional - Viewer theme (light, dark, auto).
- **className** (string) - Optional - Custom class for the root element.
- **onLoad** (function) - Optional - Callback after successful file load.
- **onError** (function) - Optional - Callback on failure.
- **onUnsupported** (function) - Optional - Callback when no plugin matches the file.
```

--------------------------------

### Configure WebGL CAD engine

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Initialize the CAD plugin with the WebGL engine loader and worker paths.

```ts
cadPlugin({
  webglDwg: {
    engineLoader: () => import("@mlightcad/cad-simple-viewer"),
    workerBaseUrl: "/vendor/cad-engine",
    baseUrl: "/cad-data/"
  }
});
```

--------------------------------

### Reproduce DWG assets

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/public/vendor/README.md

Command to regenerate DWG runtime assets from source.

```bash
corepack pnpm --filter @open-file-viewer/doc assets:dwg
```

--------------------------------

### Implement a custom preview plugin

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

Defines a plugin by implementing the PreviewPlugin interface with match and render methods. The render method returns an object with lifecycle hooks for resizing, commands, and cleanup.

```typescript
import type { PreviewPlugin } from "@open-file-viewer/core";

export function customReportPlugin(): PreviewPlugin {
  return {
    name: "custom-report",
    match(file) {
      return file.extension === "report" || file.mimeType === "application/x-report";
    },
    render(ctx) {
      const element = document.createElement("div");
      element.className = "report-preview";
      element.textContent = ctx.file.name;
      ctx.viewport.append(element);

      return {
        resize(size) {
          element.style.setProperty("--viewer-width", `${size.width}px`);
        },
        command(command) {
          if (command === "zoom-in") {
            element.classList.add("zoomed");
            return true;
          }
          return false;
        },
        destroy() {
          element.remove();
        }
      };
    }
  };
}
```

--------------------------------

### Configure officePlugin with conversion hook

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Use the convert hook to send files to a server-side conversion service and return the resulting PDF blob.

```ts
officePlugin({
  pdf: { workerSrc: pdfWorkerSrc },
  async convert({ file, arrayBuffer, reason }) {
    const form = new FormData();
    form.append("file", new Blob([arrayBuffer]), file.name);
    form.append("reason", reason);

    const response = await fetch("/api/office/convert-to-pdf", {
      method: "POST",
      body: form
    });

    if (!response.ok) {
      throw new Error("Office conversion failed");
    }

    return {
      blob: await response.blob(),
      fileName: file.name.replace(/\.[^.]+$/, ".pdf"),
      mimeType: "application/pdf"
    };
  }
});
```

--------------------------------

### Configure Toolbar

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Customize toolbar labels, order, and add custom actions via the toolbar configuration object.

```ts
createViewer({
  container: "#viewer",
  file,
  toolbar: {
    labels: {
      download: "Download",
      fullscreen: "Fullscreen",
      search: "Search"
    },
    order: ["search", "download", "approve", "fullscreen"],
    actions: [
      {
        id: "approve",
        label: "Approve",
        onClick(ctx) {
          openApprovalDialog(ctx.file);
        }
      }
    ]
  },
  plugins
});
```

--------------------------------

### Configure asset copy scripts

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Add the asset copy script to package.json to ensure assets are available before development and production builds.

```json
{
  "scripts": {
    "assets:dwg": "node scripts/copy-libredwg-assets.mjs",
    "predev": "npm run assets:dwg",
    "prebuild": "npm run assets:dwg"
  }
}
```

--------------------------------

### Configure Viewer Plugins

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/index.html

Define custom renderers or standard plugins within the viewer configuration.

```typescript
plugins: [pdfPlugin(), officePlugin(), customPlugin()]
```

--------------------------------

### PreviewPlugin Interface

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

The structure required to implement a custom plugin for the Open File Viewer.

```APIDOC
## PreviewPlugin Interface

### Description
A plugin must implement the `match(file)` and `render(ctx)` methods. The core selects the first plugin that returns true for `match`.

### Methods
- **match(file)**: Returns a boolean indicating if the plugin can handle the provided file.
- **render(ctx)**: Initializes the rendering context and returns an object containing lifecycle methods: `resize(size)`, `command(command)`, and `destroy()`.
```

--------------------------------

### Custom Toolbar implementation

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/svelte/README.md

Using the toolbar slot to add custom controls to the viewer.

```svelte
<OpenFileViewer files={files} plugins={plugins}>
  <svelte:fragment slot="toolbar" let:ctx>
    {#if ctx}
      <button disabled={!ctx.canPrevious} on:click={() => void ctx.previous()}>上一份</button>
      <span>{ctx.index + 1} / {ctx.length}</span>
      <button disabled={!ctx.canNext} on:click={() => void ctx.next()}>下一份</button>
      <button on:click={ctx.download}>下载</button>
      <button on:click={() => openApprovalDialog(ctx.file)}>审批</button>
    {/if}
  </svelte:fragment>
</OpenFileViewer>
```

--------------------------------

### Implement custom binary renderer

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Use a custom renderer for high-fidelity CAD workflows by handling binary data directly.

```ts
cadPlugin({
  async binaryRenderer({ panel, fileName, bytes }) {
    const result = await uploadToCadPreviewService(bytes, fileName);
    panel.append(result.element);
    return { destroy: () => result.dispose() };
  }
});
```

--------------------------------

### Configure video plugin controls

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Pass controlsList tokens to the video plugin to manage browser-provided media controls.

```ts
videoPlugin({ controlsList: "nodownload" });
```

--------------------------------

### Implement a custom binary renderer plugin

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Use the binaryRenderer hook to handle custom file types like DWG. Ensure the container is cleaned up in the destroy method to prevent memory leaks.

```ts
cadPlugin({
  async binaryRenderer({ panel, extension, arrayBuffer, fileName }) {
    if (extension !== "dwg") return;

    const stage = document.createElement("div");
    stage.className = "my-dwg-stage";
    panel.append(stage);

    // Load your DWG engine, worker, fonts, and assets on demand here.
    // Example: await renderDwgWithYourEngine(stage, arrayBuffer, { fileName });

    return {
      destroy() {
        stage.remove();
      }
    };
  }
});
```

--------------------------------

### Configure Toolbar Labels, Order, and Icons

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Customize the appearance and behavior of default toolbar items by defining labels, titles, custom SVG icons, and the display order.

```ts
createViewer({
  container: "#viewer",
  file,
  toolbar: {
    zoom: true,
    rotate: true,
    download: true,
    fullscreen: true,
    search: true,
    labels: {
      download: "Download",
      fullscreen: "Fullscreen",
      search: "Search",
      "zoom-in": "Zoom in",
      "zoom-out": "Zoom out",
      "zoom-reset": "Actual size",
      "rotate-right": "Rotate"
    },
    titles: {
      download: "Download current file"
    },
    icons: {
      download: '<svg viewBox="0 0 24 24"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14"/></svg>'
    },
    order: ["search", "zoom-out", "zoom-in", "zoom-reset", "rotate-right", "download", "fullscreen"]
  },
  plugins
});
```

--------------------------------

### Implement custom toolbar

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/react/README.md

Use the renderToolbar prop to inject custom controls into the file viewer interface.

```tsx
<FileViewer
  files={files}
  plugins={plugins}
  renderToolbar={(ctx) => (
    <>
      <button disabled={!ctx.canPrevious} onClick={() => void ctx.previous()}>上一份</button>
      <span>{ctx.index + 1} / {ctx.length}</span>
      <button disabled={!ctx.canNext} onClick={() => void ctx.next()}>下一份</button>
      <button onClick={ctx.download}>下载</button>
      <button onClick={() => openApprovalDialog(ctx.file)}>审批</button>
    </>
  )}
/>
```

--------------------------------

### Integrate with Svelte

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Use the OpenFileViewer component within a Svelte component.

```svelte
<script lang="ts">
  import { OpenFileViewer } from "@open-file-viewer/svelte";
  import { imagePlugin, pdfPlugin, officePlugin, textPlugin } from "@open-file-viewer/core";
  import "@open-file-viewer/core/style.css";
  import pdfWorkerSrc from "pdfjs-dist/build/pdf.worker.mjs?url";

  export let file: File;

  const plugins = [
    imagePlugin(),
    textPlugin(),
    pdfPlugin({ workerSrc: pdfWorkerSrc }),
    officePlugin()
  ];
</script>

<OpenFileViewer
  {file}
  fileName={file.name}
  width="100%"
  height="640px"
  fit="contain"
  toolbar
  theme="auto"
  {plugins}
/>
```

--------------------------------

### Integrate Open File Viewer with Svelte

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

Uses the OpenFileViewer component within a Svelte component. Props are passed directly to the component instance.

```svelte
<script lang="ts">
  import { OpenFileViewer } from "@open-file-viewer/svelte";
  import { imagePlugin, officePlugin, pdfPlugin, textPlugin } from "@open-file-viewer/core";
  import "@open-file-viewer/core/style.css";

  export let file: File;
  const plugins = [imagePlugin(), pdfPlugin({ workerSrc }), officePlugin(), textPlugin()];
</script>

<OpenFileViewer {file} fileName={file.name} height="640px" toolbar {plugins} />
```

--------------------------------

### Add Business Actions to Toolbar

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Extend the toolbar with custom buttons by defining an actions array with unique IDs, labels, and click handlers.

```ts
createViewer({
  container: "#viewer",
  file,
  toolbar: {
    order: ["download", "favorite", "approve", "share", "fullscreen"],
    actions: [
      {
        id: "favorite",
        label: "Favorite",
        onClick(ctx) {
          favoriteFile(ctx.file);
        }
      },
      {
        id: "approve",
        label: "Approve",
        onClick(ctx) {
          openApprovalDialog(ctx.file);
        }
      },
      {
        id: "share",
        label: "Share",
        disabled(ctx) {
          return !ctx.file;
        },
        onClick(ctx) {
          shareFile(ctx.file);
        }
      }
    ]
  },
  plugins
});
```

--------------------------------

### Configure Locale and Messages

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Set the locale and override default UI strings using the messages configuration object.

```ts
createViewer({
  container: "#viewer",
  file,
  locale: "zh-CN",
  messages: {
    unsupportedTitle: "No inline preview available",
    downloadFile: "Download original file",
    pdfPreviewFailedTitle: "Unable to open report",
    imageDownload: "Save original image"
  },
  plugins
});
```

--------------------------------

### Copy LibreDWG assets script

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

A Node.js script to copy WASM and distribution assets from the package to the host application's public directory.

```js
import { cp, mkdir } from "node:fs/promises";
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";

const moduleEntry = fileURLToPath(import.meta.resolve("@mlightcad/libredwg-web"));
const packageRoot = dirname(dirname(moduleEntry));
const targetRoot = fileURLToPath(
  new URL("../public/vendor/libredwg-web/", import.meta.url)
);

await mkdir(targetRoot, { recursive: true });
await Promise.all([
  cp(join(packageRoot, "dist"), join(targetRoot, "dist"), {
    recursive: true,
    force: true
  }),
  cp(join(packageRoot, "wasm"), join(targetRoot, "wasm"), {
    recursive: true,
    force: true
  })
]);
```

--------------------------------

### Implement Custom Toolbar in Svelte

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Use the toolbar slot with a let:ctx directive to define a custom toolbar within a Svelte application.

```svelte
<OpenFileViewer files={files} plugins={plugins}>
  <svelte:fragment slot="toolbar" let:ctx>
    {#if ctx}
      <button disabled={!ctx.canPrevious} on:click={() => void ctx.previous()}>Previous</button>
      <span>{ctx.index + 1} / {ctx.length}</span>
      <button disabled={!ctx.canNext} on:click={() => void ctx.next()}>Next</button>
      <button on:click={ctx.download}>Download</button>
      <button on:click={() => openApprovalDialog(ctx.file)}>Approve</button>
    {/if}
  </svelte:fragment>
</OpenFileViewer>
```

--------------------------------

### Integrate Open File Viewer with React

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

Uses the FileViewer component to render files within a React application. Ensure the workerSrc variable is defined in your environment.

```tsx
import { FileViewer } from "@open-file-viewer/react";
import { imagePlugin, officePlugin, pdfPlugin, textPlugin } from "@open-file-viewer/core";
import "@open-file-viewer/core/style.css";

const plugins = [imagePlugin(), pdfPlugin({ workerSrc }), officePlugin(), textPlugin()];

export function AttachmentPreview({ file }: { file: File }) {
  return (
    <FileViewer
      file={file}
      fileName={file.name}
      height="640px"
      toolbar
      plugins={plugins}
    />
  );
}
```

--------------------------------

### Calculate Area Function (Python)

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/test-assets/test.md

A simple Python function to calculate the area given width and height. Includes a comment explaining its purpose.

```python
def calculate_area(width, height):
    # Calculate geometric area
    return width * height

print(f"Area: {calculate_area(10, 20)}")
```

--------------------------------

### Replace Toolbar with Custom DOM

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Completely override the default toolbar by providing a render function that returns an HTMLElement.

```ts
createViewer({
  container: "#viewer",
  files,
  toolbar: {
    render(ctx) {
      const bar = document.createElement("div");
      bar.className = "business-toolbar";

      const name = document.createElement("strong");
      name.textContent = ctx.file?.name || "";

      const next = document.createElement("button");
      next.type = "button";
      next.textContent = "Next";
      next.disabled = !ctx.canNext;
      next.onclick = () => void ctx.next();

      const download = document.createElement("button");
      download.type = "button";
      download.textContent = "Download";
      download.onclick = ctx.download;

      bar.append(name, next, download);
      return bar;
    }
  },
  plugins
});
```

--------------------------------

### Integrate with React

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Use the FileViewer component within a React functional component.

```tsx
import { FileViewer } from "@open-file-viewer/react";
import { imagePlugin, pdfPlugin, officePlugin, textPlugin } from "@open-file-viewer/core";
import "@open-file-viewer/core/style.css";
import pdfWorkerSrc from "pdfjs-dist/build/pdf.worker.mjs?url";

const plugins = [
  imagePlugin(),
  textPlugin(),
  pdfPlugin({ workerSrc: pdfWorkerSrc }),
  officePlugin()
];

export function AttachmentPreview({ file }: { file: File }) {
  return (
    <FileViewer
      file={file}
      fileName={file.name}
      width="100%"
      height="640px"
      fit="contain"
      toolbar
      theme="auto"
      plugins={plugins}
    />
  );
}
```

--------------------------------

### Copy DWG Assets Script

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

A Node.js script to copy CAD worker and WASM assets into the host application's public directory.

```javascript
import { copyFile, cp, mkdir } from "node:fs/promises";
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";

const moduleEntry = fileURLToPath(import.meta.resolve("@mlightcad/libredwg-web"));
const packageRoot = dirname(dirname(moduleEntry));
const targetRoot = fileURLToPath(
  new URL("../public/vendor/libredwg-web/", import.meta.url)
);
const viewerEntry = fileURLToPath(import.meta.resolve("@mlightcad/cad-simple-viewer"));
const viewerRoot = dirname(dirname(viewerEntry));
const viewerTarget = fileURLToPath(
  new URL("../public/vendor/cad-engine/", import.meta.url)
);

await Promise.all([
  mkdir(targetRoot, { recursive: true }),
  mkdir(viewerTarget, { recursive: true })
]);
await Promise.all([
  cp(join(packageRoot, "dist"), join(targetRoot, "dist"), {
    recursive: true,
    force: true
  }),
  cp(join(packageRoot, "wasm"), join(targetRoot, "wasm"), {
    recursive: true,
    force: true
  }),
  copyFile(
    join(viewerRoot, "dist/libredwg-parser-worker.js"),
    join(viewerTarget, "libredwg-parser-worker.js")
  ),
  copyFile(
    join(viewerRoot, "dist/mtext-renderer-worker.js"),
    join(viewerTarget, "mtext-renderer-worker.js")
  )
]);
```

--------------------------------

### Override webworkify-webpack dependency

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Use pnpm overrides to resolve dependency issues with mpegts.js if necessary.

```json
{
  "pnpm": {
    "overrides": {
      "webworkify-webpack": "2.1.5"
    }
  }
}
```

--------------------------------

### Disable LibreDWG

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/core/README.md

Disable the LibreDWG engine to show only metadata and conversion guidance.

```ts
cadPlugin({ libreDwg: false });
```

--------------------------------

### Patch setImmediate for Micro-frontends

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Manually patch setImmediate in sub-app entry points for older versions to prevent loading hangs in sandboxed environments.

```js
if (window.__POWERED_BY_QIANKUN__) {
  window.setImmediate = (fn, ...args) => setTimeout(fn, 0, ...args);
}
```

--------------------------------

### Replace Toolbar with React Render Prop

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

Use the renderToolbar prop to provide a custom React component for the toolbar interface.

```jsx
<FileViewer
  file={file}
  toolbar
  renderToolbar={(ctx) => (
    <div className="business-toolbar">
      <button onClick={ctx.previous} disabled={!ctx.canPrevious}>Previous</button>
      <span>{ctx.index + 1} / {ctx.length}</span>
      <button onClick={ctx.download}>Download</button>
      <button onClick={() => approve(ctx.file)}>Approve</button>
    </div>
  )}
/>
```

--------------------------------

### Replace Toolbar with Vue Slot

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

Use the #toolbar slot to define a custom toolbar template in Vue.

```html
<OpenFileViewer :file="file" toolbar>
  <template #toolbar="ctx">
    <div class="business-toolbar">
      <button @click="ctx.previous()" :disabled="!ctx.canPrevious">Previous</button>
      <span>{{ ctx.index + 1 }} / {{ ctx.length }}</span>
      <button @click="ctx.download()">Download</button>
      <button @click="approve(ctx.file)">Approve</button>
    </div>
  </template>
</OpenFileViewer>
```

--------------------------------

### Custom Toolbar Slot

Source: https://github.com/xushanpei/open-file-viewer/blob/main/packages/vue/README.md

Customize the toolbar interface using the toolbar slot to add product-specific controls.

```vue
<OpenFileViewer :files="files" :plugins="plugins">
  <template #toolbar="ctx">
    <button :disabled="!ctx.canPrevious" @click="ctx.previous()">上一份</button>
    <span>{{ ctx.index + 1 }} / {{ ctx.length }}</span>
    <button :disabled="!ctx.canNext" @click="ctx.next()">下一份</button>
    <button @click="ctx.download()">下载</button>
    <button @click="openApprovalDialog(ctx.file)">审批</button>
  </template>
</OpenFileViewer>
```

--------------------------------

### Implement Custom Toolbar in React

Source: https://github.com/xushanpei/open-file-viewer/blob/main/README.md

Use the renderToolbar prop to define a custom toolbar component within a React application.

```tsx
<FileViewer
  files={files}
  plugins={plugins}
  renderToolbar={(ctx) => (
    <>
      <button disabled={!ctx.canPrevious} onClick={() => void ctx.previous()}>Previous</button>
      <span>{ctx.index + 1} / {ctx.length}</span>
      <button disabled={!ctx.canNext} onClick={() => void ctx.next()}>Next</button>
      <button onClick={ctx.download}>Download</button>
      <button onClick={() => openApprovalDialog(ctx.file)}>Approve</button>
    </>
  )}
/>
```

--------------------------------

### Replace Toolbar with Svelte Slot

Source: https://github.com/xushanpei/open-file-viewer/blob/main/doc/api.html

Use the toolbar slot with a svelte:fragment to define a custom toolbar in Svelte.

```html
<OpenFileViewer {file} toolbar>
  <svelte:fragment slot="toolbar" let:ctx>
    <div class="business-toolbar">
      <button on:click={ctx.previous} disabled={!ctx.canPrevious}>Previous</button>
      <span>{ctx.index + 1} / {ctx.length}</span>
      <button on:click={ctx.download}>Download</button>
      <button on:click={() => approve(ctx.file)}>Approve</button>
    </div>
  </svelte:fragment>
</OpenFileViewer>
```
Tokens:
Raw