@flyfish-group/file-viewer-web

纯 Web 文件预览组件。这个包是 @file-viewer/web 的历史包名同步版本，提供同样的 <flyfish-file-viewer> 原生 Web Component、mountViewer 命令式 controller、IIFE 全局脚本和资源复制 CLI。

npm install @flyfish-group/file-viewer-web

<flyfish-file-viewer
  id="viewer"
  src="https://example.com/demo.pdf"
  theme="light"
  toolbar-position="bottom-right"
  style="display:block;height:720px"
></flyfish-file-viewer>

import { defineFileViewerElement } from '@flyfish-group/file-viewer-web'

defineFileViewerElement()

const viewer = document.getElementById('viewer')
viewer.addEventListener('viewer-event', event => {
  console.log(event.detail.type, event.detail.payload)
})
viewer.reload()

需要完全命令式控制时，仍可使用 mountViewer(container, options) 返回完整 controller。

鉴权文件可以由宿主系统先下载成 Blob，再通过 file 和 name 交给预览器:

const blob = await fetch('/api/files/contract', { credentials: 'include' }).then(res => res.blob())

const viewer = document.querySelector('flyfish-file-viewer')
viewer.file = blob
viewer.name = 'contract.pdf'

Script 标签接入

无构建工具项目可以自托管 IIFE 包，它会暴露 window.FlyfishFileViewerWeb:

<script src="/vendor/file-viewer-web/flyfish-file-viewer-web.iife.js"></script>
<flyfish-file-viewer
  src="/files/demo.docx"
  theme="light"
  style="display:block;height:720px"
></flyfish-file-viewer>

浏览器不能直接解析 @flyfish-group/file-viewer-web 这种裸包名；没有构建工具时请使用静态 URL、IIFE 全局包，或配置 import map。Worker、WASM 和示例资源可以通过复制命令自托管:

npx file-viewer-copy-assets ./public/file-viewer

options 会透传给共享预览底座，可配置主题、下载/打印/导出 HTML 操作栏、文字或图片水印、搜索高亮、AI 友好文本切片、统一缩放，以及压缩包预览的 Worker、IndexedDB 缓存和体积上限。生命周期、操作能力变化、搜索状态和当前位置会通过 onEvent 回传给宿主，适合记录加载耗时、审计下载/打印尝试、搜索命中、页码/行号、AI 切片和溯源状态。

新项目建议优先使用标准包名 @file-viewer/web。官方文档: https://doc.file-viewer.app/

README.md 2.4 KB History Raw

@flyfish-group/file-viewer-web

Script 标签接入

README.md 2.4 KB

History Raw