jit-viewer
v1.1.0
Published
JitViewer核心SDK - 跨框架文档预览引擎，支持PDF、DOCX、XLSX、PPTX、OFD、TXT、Markdown等格式
Maintainers
alex_xuReadme
@jit-viewer/core
跨框架文档预览 SDK，支持 PDF、DOCX、XLSX、PPTX、OFD、TXT、Markdown 等多种格式。
特性
- 📄 多格式支持 - PDF、DOCX、XLSX/XLS、PPTX、OFD、TXT、Markdown
- 🔧 跨框架 - 支持 Vue3、React、原生 HTML/JS
- 🎨 主题切换 - 内置浅色/深色主题
- 🌐 国际化 - 支持中文、英文
- 📦 开箱即用 - 内置工具栏，支持缩放、旋转、打印、下载
- 📱 响应式 - 适配各种屏幕尺寸
安装
# npm
npm install @jit-viewer/core
# yarn
yarn add @jit-viewer/core
# pnpm
pnpm add @jit-viewer/core快速开始
Vue3 项目
<template>
<div ref="containerRef" class="viewer-container"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { createViewer } from '@jit-viewer/core'
import '@jit-viewer/core/style.css'
const containerRef = ref(null)
let viewer = null
onMounted(() => {
viewer = createViewer({
target: containerRef.value,
file: '/path/to/document.pdf',
toolbar: true,
theme: 'light',
locale: 'zh-CN',
width: '100%',
height: '600px',
onReady: () => console.log('Viewer ready'),
onLoad: () => console.log('File loaded'),
onError: (err) => console.error('Error:', err)
})
viewer.mount()
})
onUnmounted(() => {
viewer?.destroy()
})
</script>React 项目
import { useRef, useEffect } from 'react'
import { createViewer } from '@jit-viewer/core'
import '@jit-viewer/core/style.css'
function App() {
const containerRef = useRef<HTMLDivElement>(null)
const viewerRef = useRef(null)
useEffect(() => {
viewerRef.current = createViewer({
target: containerRef.current,
file: '/path/to/document.pdf',
toolbar: true
})
viewerRef.current.mount()
return () => viewerRef.current?.destroy()
}, [])
return <div ref={containerRef} style={{ width: '100%', height: '600px' }} />
}原生 HTML/JS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@jit-viewer/core/dist/iife/jit-viewer.min.css">
</head>
<body>
<div id="viewer"></div>
<script src="https://unpkg.com/@jit-viewer/core/dist/iife/jit-viewer.min.js"></script>
<script>
const viewer = JitViewer.createViewer({
target: '#viewer',
file: '/path/to/document.pdf',
toolbar: true,
width: '100%',
height: '600px'
})
viewer.mount()
</script>
</body>
</html>API
createViewer(options)
创建预览器实例。
Options
| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| target | HTMLElement \| string | - | 挂载目标元素 |
| file | FileSource | - | 文件源（URL、File、ArrayBuffer） |
| filename | string | - | 文件名 |
| toolbar | boolean \| ToolbarConfig | true | 是否显示工具栏 |
| theme | 'light' \| 'dark' | 'light' | 主题 |
| locale | 'zh-CN' \| 'en' | 'zh-CN' | 语言 |
| width | string \| number | '100%' | 宽度 |
| height | string \| number | '100%' | 高度 |
| onReady | () => void | - | 就绪回调 |
| onLoad | () => void | - | 加载完成回调 |
| onError | (error: Error) => void | - | 错误回调 |
ViewerInstance
| 方法 | 说明 |
|------|------|
| mount() | 挂载到 DOM |
| destroy() | 销毁实例 |
| setFile(file, filename?) | 设置文件 |
| zoom(scale) | 设置缩放比例 |
| rotate(degree) | 设置旋转角度 |
| reset() | 重置缩放和旋转 |
| fullscreen(enable?) | 切换全屏 |
| print() | 打印文档 |
| download() | 下载文档 |
| setTheme(theme) | 设置主题 |
| setLocale(locale) | 设置语言 |
| getState() | 获取当前状态 |
支持的文件格式
| 格式 | 扩展名 | 说明 |
|------|--------|------|
| PDF | .pdf | PDF 文档 |
| Word | .docx | Microsoft Word 文档 |
| Excel | .xlsx, .xls | Microsoft Excel 表格 |
| PowerPoint | .pptx, .ppt | Microsoft PowerPoint 演示文稿 |
| OFD | .ofd | 电子公文格式 |
| 文本 | .txt | 纯文本文件 |
| Markdown | .md, .markdown | Markdown 文档 |
依赖
- Vue ^3.4.0 (peer dependency)
浏览器支持
- Chrome >= 80
- Firefox >= 75
- Safari >= 13
- Edge >= 80