Svelte Integration

Native Svelte Component

The Svelte package provides both a native component and an action. Use the component for declarative pages and the action for existing DOM containers.

Install

Use the standard package when you want a light entry plus an explicit preset:

npm install @file-viewer/svelte @file-viewer/preset-office

Use the full package when you want the complete matrix by default:

npm install @file-viewer/svelte-full

@file-viewer/svelte-full enables @file-viewer/preset-all automatically while keeping the same component, action, event, and controller APIs.

Component Usage

<script lang="ts">
  import FileViewer from '@file-viewer/svelte'
  import officePreset from '@file-viewer/preset-office'

  const options = {
    preset: officePreset,
    rendererMode: 'replace',
    theme: 'light',
    styleIsolation: 'shadow',
    toolbar: { position: 'bottom-right' },
    archive: { cache: true }
  }

  function handleViewerEvent(event) {
    console.log(event.detail.type, event.detail.payload)
  }
</script>

<section style="height: 100vh">
  <FileViewer
    url="/files/report.docx"
    {options}
    on:viewerEvent={handleViewerEvent}
  />
</section>

Pass styleIsolation:'shadow' when host CSS is uncontrolled and renderer content should use an isolated render root. The Svelte package keeps compatibility by default. See Style Isolation And Customization for tokens and ::part() customization.

The full package only changes the import:

<script lang="ts">
  import FileViewer from '@file-viewer/svelte-full'

  const options = {
    theme: 'light',
    toolbar: { position: 'bottom-right' }
  }
</script>

<section style="height: 100vh">
  <FileViewer url="/files/demo.pdf" {options} />
</section>

Action Usage

For pages that do not want a component instance, mount the action on any existing container:

<script lang="ts">
  import { fileViewer } from '@file-viewer/svelte'
  import officePreset from '@file-viewer/preset-office'

  const viewerOptions = {
    url: '/files/report.pdf',
    options: {
      preset: officePreset,
      rendererMode: 'replace',
      theme: 'light'
    }
  }
</script>

<div use:fileViewer={viewerOptions} style="height: 720px"></div>

Vite Auto Assembly

SvelteKit / Vite projects can register the plugin so installed presets activate automatically and Worker / WASM / font / vendor assets are copied:

npm install -D @file-viewer/vite-plugin

import { fileViewerRenderers } from '@file-viewer/vite-plugin'

export default {
  plugins: [
    fileViewerRenderers({
      copyAssets: true
    })
  ]
}

Non-Vite projects can keep using options.preset / options.renderers explicitly.