Svelte 集成

For Svelte Projects

Svelte 包提供原生组件和 action 两种入口。组件适合页面声明式使用，action 适合已有 DOM 容器或轻量工具页。

安装

最轻入口按需选择 preset：

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

一步到位完整能力使用 full 包：

npm install @file-viewer/svelte-full

@file-viewer/svelte-full 默认启用 @file-viewer/preset-all，组件、action、事件和 controller API 与标准包一致。

组件用法

<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>

宿主 CSS 不可控时可传 styleIsolation:'shadow'，让 renderer 内容进入隔离渲染根。Svelte 包默认保持兼容；tokens 和 ::part() 主题定制见 样式隔离与主题定制。

full 包写法只替换包名，不需要手动 import preset：

<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 用法

如果你不想使用组件，可以直接把 action 挂到已有容器：

<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 自动装配

SvelteKit / Vite 项目可以注册插件，让已安装 preset 自动激活，并复制 Worker / WASM / 字体 / vendor 资源：

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

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

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

非 Vite 项目继续使用 options.preset / options.renderers 显式注入能力即可。