Svelte 集成
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 与标准包一致。
包根入口的默认导出固定为 Svelte 组件;action 和底层 controller helper 分别从明确的 /action、/controller 子路径导入。
组件用法
<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>Svelte 默认使用 Shadow DOM,宿主全局 CSS 不会破坏工具栏或 renderer 内容。只有依赖深层 class 覆盖的旧项目才使用 styleIsolation:'none';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/action'
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>Full 包的 action 使用对应的明确入口:
import { fileViewer } from '@file-viewer/svelte-full/action'Vite 自动装配
SvelteKit / Vite 项目可以注册插件,让已安装 preset 自动激活,并复制 Worker / WASM / 字体 / vendor 资源:
npm install -D @file-viewer/vite-pluginimport { fileViewerRenderers } from '@file-viewer/vite-plugin'
export default {
plugins: [
fileViewerRenderers({
copyAssets: true
})
]
}安装 @file-viewer/svelte-full 时,同一配置会识别 Full 包并在 dev/build 自动发布完整同版本资产;Full 已内置 preset-all,不要再安装或传入 preset。非 Vite Full 项目运行随包安装的同版本 CLI:
npx --no-install file-viewer-copy-assets ./public/file-viewer非 Vite 标准包项目继续使用 options.preset / options.renderers 显式注入能力即可。