sweet-viewer

简体中文 | English

告别软件下载！强大的在线预览器让你即时访问所有文件。轻松一键打开预览 DOCX、XLSX、PPTX、TXT、代码等多种格式。

从复杂的 Excel 表格到重要的 Word 文档和关键的 PowerPoint 演示文稿，我们都能搞定。体验为极致便利而设计的一站式平台的自由。

在线体验：https://viewer.sweetui.com

特性

• 多格式支持 — DOCX、PPTX、XLSX、TXT / 代码文件
• 框架无关 — 核心为原生 JS，提供 React / Vue 适配组件
• 纯前端解析 — 文件不上传服务器，隐私安全
• 智能编码检测 — TXT 自动识别 UTF-8 / UTF-16 / GBK / GB18030 等
• 行号同步 — TXT 预览带行号、行高亮、滚动联动
• TXT 暗色模式 — TXT / 代码预览内置暗色主题
• 模态 / 内嵌 — 支持全屏遮罩或内嵌容器两种模式
• 事件系统 — loadstart / loaded / error / close

安装

npm install sweet-viewer
# 或
pnpm add sweet-viewer
# 或
yarn add sweet-viewer

使用

原生 JS

import { createViewer } from "sweet-viewer";
import "sweet-viewer/style.css"; // 按需，如果构建未自动注入

const viewer = createViewer("#container", { overlay: true });

viewer.loadFile(file);
viewer.on("loaded", () => console.log("渲染完成"));
viewer.on("error", (e) => console.error(e));

React

import { SweetViewerReact } from "sweet-viewer/react";
import "sweet-viewer/style.css";

function App() {
  const [file, setFile] = useState<File | null>(null);
  return (
    <>
      <input type="file" onChange={(e) => setFile(e.target.files?.[0] || null)} />
      <SweetViewerReact source={file} overlay onLoaded={() => console.log("done")} />
    </>
  );
}

组件渲染一个包裹 <div class="sv-container">（会追加你传入的 class）。可通过可选的 className 和 style 自定义：

<SweetViewerReact
  source={file}
  className="my-viewer"
  style={{ height: "80vh", borderRadius: 12 }}
/>

Vue 3

<script setup lang="ts">
import { SweetViewerVue } from "sweet-viewer/vue";
import "sweet-viewer/style.css";
import { ref } from "vue";

const file = ref<File | null>(null);
</script>

<template>
  <input type="file" @change="(e) => file = (e.target as HTMLInputElement).files?.[0] || null" />
  <SweetViewerVue :source="file" overlay @loaded="() => console.log('done')" />
</template>

Vue 组件同样支持可选的 class 和 style：

<SweetViewerVue
  :source="file"
  class="my-viewer"
  :style="{ height: '80vh', borderRadius: '12px' }"
/>

API

组件 Props（React / Vue）

| Prop | 类型 | 默认值 | 说明 | |--------|------|--------|------| | source | File \| Blob \| ArrayBuffer \| string \| null | null | 要预览的文档源，变化时自动重新加载 | | fileName | string | — | 文件名（用于类型推断，传 File 时自动获取） | | className (React) / class (Vue) | string | — | 包裹 div 的自定义 class，追加在 sv-container 之后 | | style | React.CSSProperties / Record<string, any> | — | 包裹 div 的自定义内联样式 | | theme | "light" \| "dark" | "light" | 主题 | | overlay | boolean | false | 是否全屏遮罩 | | showHeader | boolean | true | 显示文件名头部 | | showClose | boolean | true | 显示关闭按钮 | | txtMaxSize | number | 5242880 | TXT 最大字节数，设为 0 或 Infinity 则不限制 | | txtMaxLines | number | 20000 | TXT 最大渲染行数（超出截断） | | maxSize | number | 52428800 | DOCX/PPTX/XLSX 最大字节数（50MB），设为 0 或 Infinity 则不限制 |

React 事件：onLoadStart / onLoaded / onError / onClose
Vue 事件：@loadstart / @loaded / @error / @close

SweetViewer 选项（原生 JS）

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | theme | "light" \| "dark" | "light" | 主题（暗色模式目前仅对 TXT / 代码预览生效）| | overlay | boolean | false | 是否全屏遮罩 | | showHeader | boolean | true | 显示文件名头部 | | showClose | boolean | true | 显示关闭按钮 | | width | string \| number | "100%" | 容器宽度 | | height | string \| number | "100%" | 容器高度 | | txtMaxSize | number | 5242880 | TXT 最大字节数，设为 0 或 Infinity 则不限制 | | txtMaxLines | number | 20000 | TXT 最大渲染行数（超出截断）| | maxSize | number | 52428800 | DOCX/PPTX/XLSX 最大字节数（50MB），设为 0 或 Infinity 则不限制 |

方法

• load(source, name?) — 加载并渲染
• loadFile(file) — 便捷方法，直接传 File
• clear() — 清空内容
• setTheme(theme) — 切换主题
• setWidth(width) / setHeight(height) — 运行时更新容器尺寸
• setShowClose(bool) / setShowHeader(bool) — 运行时切换 UI 元素
• show() — overlay 关闭后重新显示
• on(event, cb) / off(event, cb) — 事件监听
• destroy() — 销毁实例

事件

• loadstart — 开始加载
• loaded — 加载完成
• error — 出错
• close — 关闭

支持的文件类型

| 类型 | 扩展名 | 底层库 | |------|--------|--------| | DOCX | .docx | docx-preview | | PPTX | .pptx | pptx-preview | | XLSX | .xlsx | xlsx-preview | | TXT / 代码 | .txt .md .json .js .ts .csv .log .xml .yml ... | 内置实现 |

在线 Demo

在线体验：https://viewer.sweetui.com

本地开发

git clone https://github.com/leuvi/sweet-viewer.git
cd sweet-viewer
npm install
npm run dev

打开 http://localhost:5173 拖拽文件即可预览。

License

MIT © @苹果熊