集成场景演示

以下所有预览均由线上 SDK 实时渲染 —— 页面直接引用 jitword.com/preview_sdk 的构建产物，所见即你接入后的真实效果。

SDK 加载中…

场景一 · 快速开始

最简集成：一个容器 + 三行代码。内置样本文件开箱即试，也支持拖拽 / 选择你自己的文件。

quick-start · dropzone: true

<!-- 引入线上 SDK（CDN 单文件，经典 script 跨域零 CORS） -->
<script src="https://jitword.com/preview_sdk/file-preview.bundle.js"></script>

<script>
  var preview = JitWordFilePreview.createFilePreview('#preview-box', {
    dropzone: true,  // 空态拖拽上传区
  })

  // File / Blob / URL 均可直接打开
  preview.open(file)
</script>

场景二 · URL 远程预览

直接传入文件链接：SDK 负责下载、安全检查、渲染，并上报三阶段进度，支持 AbortController 中断与 LRU 缓存。

cache

下载

—

安全检查

—

渲染

—

url-preview · progress / signal / cache

提示 URL 预览要求文件服务器允许 CORS。没有现成链接？先用「示例 TXT」体验本地管线，或部署任意静态文件后粘贴其地址。

场景三 · 沉浸式文档详情页

隐藏 SDK 自带工具栏（toolbar: false），由宿主系统自己组织页面结构 —— 左侧文件信息与事件流，右侧纯净阅读区。

文件名—

格式—

大小—

状态idle

等待打开文件…

detail-page · toolbar: false

var preview = JitWordFilePreview.createFilePreview('#reader', { toolbar: false })
preview.on('ready', (info) => renderFileInfo(info))     // 宿主自行渲染文件信息
preview.on('statuschange', (s) => updateStatus(s))      // 状态机接入宿主 UI

场景四 · 多实例并存与格式白名单

同一页面创建多个独立实例，共享渲染引擎 chunk 与下载缓存；用 formats 收窄白名单后，白名单外的格式将被优雅拒绝。

实例配置 toolbar 格式白名单 docx pdf txt md html

instance #1

instance #2

instance #3

试一试取消勾选某个格式后点「重建实例」，再打开对应格式 —— SDK 会以 unsupported-extension 错误优雅拒绝，而不是崩溃。