JitViewer SDK

功能特性

多格式支持

PDF、DOCX、XLSX/XLS、CSV、PPTX、TXT、Markdown、视频一站式预览

缩放与旋转

支持文档缩放、旋转、全屏查看，操作流畅

跨框架支持

基于 Vue3 开发，支持在 Vue、React、原生 HTML 中使用

内置工具栏

提供完整的工具栏组件，支持自定义配置

快速开始

直接在 HTML 中引入 SDK：

html

<link rel="stylesheet" href="https://unpkg.com/jit-viewer/dist/iife/jit-viewer.min.css">
<script src="https://unpkg.com/jit-viewer/dist/iife/jit-viewer.min.js"></script>

<div id="viewer"></div>

<script>
  JitViewer.createViewer({
    file: 'document.pdf',
    toolbar: true
  }).mount('#viewer');
</script>

或使用 npm 安装：

bash

npm install jit-viewer

安装方式

npm 安装（推荐）

bash

# npm
npm install jit-viewer

# yarn
yarn add jit-viewer

# pnpm
pnpm add jit-viewer

依赖说明

JitViewer 依赖以下包，安装时会自动安装：

vue ^3.4.0
@vue-office/docx ^1.6.0
@vue-office/excel ^1.7.0
@vue-office/pdf ^2.0.0
@vue-office/pptx ^1.0.0

在 HTML 中直接引入（推荐）

通过 script 标签直接引入 IIFE 版本，无需构建工具：

html

<!-- 引入 SDK 样式和脚本 -->
<link rel="stylesheet" href="https://unpkg.com/jit-viewer/dist/iife/jit-viewer.min.css">
<script src="https://unpkg.com/jit-viewer/dist/iife/jit-viewer.min.js"></script>

<!-- 创建预览容器 -->
<div id="viewer"></div>

<script>
  // 使用 createViewer API 创建预览器
  const viewer = JitViewer.createViewer({
    file: 'document.pdf',     // 文件URL或ArrayBuffer
    filename: 'document.pdf', // 文件名
    toolbar: true,            // 显示工具栏
    width: '100%',
    height: '600px',
    onReady: () => console.log('准备就绪'),
    onLoad: () => console.log('加载完成'),
    onError: (err) => console.error('错误:', err)
  });
  
  // 挂载到DOM
  viewer.mount('#viewer');
</script>

Vue 项目中使用

通过 npm 安装后在 Vue 组件中使用：

vue

import { Viewer } from 'jit-viewer'
import 'jit-viewer/style.css'

// 在模板中使用
<Viewer :file="fileUrl" :toolbar="true" />

Viewer 组件 Props

属性	类型	默认值	说明
`file`	FileSource	-	文件源，支持 URL、File 对象、ArrayBuffer
`filename`	string	可选	文件名，用于下载和显示
`toolbar`	boolean \| ToolbarConfig	`true`	是否显示工具栏或工具栏配置
`theme`	'light' \| 'dark'	`'light'`	主题风格
`locale`	'zh-CN' \| 'en-US'	`'zh-CN'`	语言
`width`	string \| number	`'100%'`	宽度
`height`	string \| number	`'100%'`	高度

Viewer 组件 Events

事件	参数	说明
`ready`	-	组件初始化完成
`load`	-	文件加载完成
`error`	Error	加载或渲染出错
`destroy`	-	组件销毁

createViewer API

用于在 HTML/JS 中直接调用，无需 Vue 框架：

javascript

// 通过 JitViewer 全局对象访问
const viewer = JitViewer.createViewer({
  file: 'document.pdf',      // 文件URL或ArrayBuffer
  filename: 'document.pdf',  // 可选：文件名
  toolbar: true,             // 显示工具栏
  theme: 'light',            // 主题：'light' | 'dark'
  width: '100%',
  height: '600px',
  onReady: () => console.log('准备就绪'),
  onLoad: () => console.log('加载完成'),
  onError: (err) => console.error('错误:', err)
})

// 挂载到 DOM
viewer.mount('#viewer-container')

// 可用方法
viewer.zoom(1.5)         // 设置缩放比例
viewer.rotate(90)       // 设置旋转角度
viewer.fullscreen(true) // 切换全屏
viewer.print()          // 打印文档
viewer.download()       // 下载文档
viewer.destroy()        // 销毁实例

ViewerInstance 方法

方法	参数	返回值	说明
`mount`	HTMLElement \| string	`Promise<void>`	挂载到指定元素
`destroy`	-	`void`	销毁实例
`setFile`	FileSource, string?	`Promise<void>`	设置文件
`zoom`	number	`void`	设置缩放比例
`rotate`	number	`void`	设置旋转角度
`fullscreen`	boolean	`void`	切换全屏
`print`	-	`Promise<void>`	打印文档
`download`	-	`Promise<void>`	下载文档

ToolbarConfig 配置

typescript

interface ToolbarConfig {
  items?: string[]           // 显示的工具项
  position?: 'top' | 'bottom' | 'both'  // 位置
  visible?: boolean          // 是否可见
}

// 默认工具项
const defaultItems = [
  'zoom',      // 缩放控制
  'rotate',    // 旋转控制
  'fullscreen', // 全屏
  'pagination', // 分页
  'print',     // 打印
  'download'   // 下载
]