开源免费 · 一行代码集成 · 已发布 npm 包

跨框架文档预览 SDK

支持 PDF、Word、Excel、CSV、PPT、OFD、CAD（DXF）、图片、Markdown、TXT、视频等多种格式
Vue3、React、原生 HTML 无缝切换，轻量高效，开箱即用

在线演示快速开始 GitHub

PDF 文档预览

DOCX Word预览

XLSX Excel预览

CSV 数据表预览

PPTX PPT预览

MD Markdown

TXT 文本预览

OFD 版式文档

DXF CAD 图纸

IMG 图片预览

VIDEO 视频预览

AUDIO 音频预览

CODE 代码预览

功能特性

为开发者提供完整的文档预览解决方案

一行代码集成

只需引入2个文件，即可在您的应用中运行功能完整的文档预览器。无需复杂的配置，开箱即用。

多格式支持

支持 PDF、DOCX、XLSX、CSV、PPTX、OFD、CAD（DXF）、图片、音频、代码、TXT、Markdown、视频等多种常见格式，满足各种预览需求。

丰富的控制 API

提供缩放、旋转、翻页、全屏、下载等完整的控制 API，支持自定义工具栏配置。

明暗主题切换

内置浅色和深色主题，支持动态切换，适配不同的应用场景和用户偏好。

移动端适配

支持响应式布局，完美适配移动端设备，提供流畅的触摸操作体验。

多种文件源

支持 URL、File 对象、Blob、ArrayBuffer 等多种文件源，灵活满足各种业务场景。

跨框架兼容

支持 Vue3、React、原生 HTML 无缝切换，提供对应框架的组件和 Hooks。

零依赖打包

打包所有依赖，无需额外安装，按需加载，性能优化，轻量高效。

国际化支持

内置中文、英文语言包，支持动态切换，可扩展更多语言。

在线演示

实时体验 JitViewer 的文档预览能力

选择示例文件：

上传本地文件

现在可直接上传并测试本地 CSV、DXF 等文件，以及 MP4 / MOV / WebM 视频、MP3 / WAV 音频、JS / CSS / JSON 代码文件。

API 测试：

当前演示

正在预览 PDF 示例文档。您可以尝试缩放、旋转等操作，或上传自己的 DXF、CSV、视频与其他本地文件进行预览。

快速开始

支持 npm 安装和 CDN 引入，Vue3/React/原生 HTML 均可使用

安装依赖

            # npm
npm install jit-viewer

# yarn
yarn add jit-viewer

# pnpm
pnpm add jit-viewer
          

V Vue3 使用方式

DocumentViewer.vue

              <template>
  <div class="viewer-container">
    <div ref="viewerRef" style="width: 100%; height: 600px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { createViewer } from 'jit-viewer'
import 'jit-viewer/style.css'

const viewerRef = ref(null)
let viewerInstance = null

onMounted(() => {
  if (!viewerRef.value) return
  
  // 创建 Viewer 实例
  viewerInstance = createViewer({
    target: viewerRef.value,
    file: 'https://example.com/document.pdf',
    theme: 'light',
    toolbar: true,
    width: '100%',
    height: '600px',
    onReady: () => console.log('Viewer ready'),
    onLoad: () => console.log('File loaded'),
    onError: (err) => console.error('Error:', err)
  })
  
  viewerInstance.mount()
})

onUnmounted(() => {
  // 销毁实例
  viewerInstance?.destroy()
})
</script>
            

R React 使用方式

DocumentViewer.tsx

              import { useEffect, useRef, useState } from 'react'
import { createViewer, type ViewerInstance } from 'jit-viewer'
import 'jit-viewer/style.css'

function DocumentViewer() {
  const containerRef = useRef<HTMLDivElement>(null)
  const [viewer, setViewer] = useState<ViewerInstance | null>(null)

  useEffect(() => {
    if (containerRef.current) {
      const instance = createViewer({
        target: containerRef.current,
        theme: 'light',
        toolbar: true
      })
      instance.mount()
      setViewer(instance)
    }
    return () => viewer?.destroy()
  }, [])

  return <div ref={containerRef} style={{ width: '100%', height: '600px' }} />
}
            

引入 SDK 文件

在 HTML 中引入 SDK 样式和脚本文件

index.html

                  <!-- 引入样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/jit-viewer/dist/iife/jit-viewer.min.css">

<!-- 引入 JitViewer SDK -->
<script src="https://unpkg.com/jit-viewer/dist/iife/jit-viewer.min.js"></script>
                

创建预览容器

在页面中添加一个容器元素

HTML

                  <div id="viewer" style="width: 100%; height: 600px;"></div>

初始化预览器

使用 JitViewer 创建预览器实例并挂载

JavaScript

                  const { createViewer } = JitViewer;

// 创建预览器实例
const viewer = createViewer({
  file: 'document.pdf',      // 文件 URL
  filename: 'document.pdf',  // 文件名（可选）
  toolbar: true,             // 显示工具栏
  theme: 'light',            // 主题
  width: '100%',
  height: '600px',
  onReady: () => console.log('准备就绪'),
  onLoad: () => console.log('加载完成'),
  onError: (err) => console.error('错误:', err)
});

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

API 文档

完整的 API 参考，助力深度定制

createViewer(options)

参数	类型	默认值	说明
`target`	HTMLElement \| string	-	挂载目标元素
`file`	FileSource	-	文件源（本地文件、远程 URL、Blob、ArrayBuffer 等）
`type`	FileType	自动识别	手动指定文件类型
`filename`	string	-	文件名
`toolbar`	boolean \| ToolbarConfig	true	工具栏配置
`theme`	'light' \| 'dark' \| ThemeConfig	'light'	主题
`locale`	'zh-CN' \| 'en' \| LocaleConfig	'zh-CN'	语言
`width`	string\|number	'100%'	宽度
`height`	string\|number	'100%'	高度
`className`	string	-	自定义类名
`style`	Record<string, string>	-	自定义样式
`pdfRender`	'native' \| 'inset'	'inset'	PDF 预览方式
`watermark`	WatermarkConfig \| null	null	文档水印配置，支持文本水印和图片水印
`proxyUrl`	string	-	自定义代理地址
`requestAdapter`	RequestAdapter	-	自定义请求适配器
`renderOptions`	object	-	初始缩放、旋转、页码等渲染配置
`onReady`	function	-	准备就绪回调
`onLoad`	function	-	加载完成回调
`onError`	function	-	错误回调
`onDestroy`	function	-	销毁回调
`renderOptions.zoom`	number	1	初始缩放比例
`renderOptions.rotate`	number	0	初始旋转角度

WatermarkConfig

水印通过 ViewerOptions.watermark 配置，只作用于预览层，不会修改原始文件内容。支持文本水印和图片水印，并可控制透明度、旋转角度、平铺间距以及顶层 / 底层显示。

参数	类型	说明
`type`	'text' \| 'image'	水印类型
`content`	string	文本水印内容，`type: 'text'` 时使用
`image`	string	图片地址，`type: 'image'` 时使用
`fontSize`	number	文字字号，单位 px
`color`	string	文字颜色
`fontFamily`	string	文字字体
`fontWeight`	string \| number	字重
`imageWidth`	number	图片水印宽度，单位 px
`imageHeight`	number	图片水印高度，单位 px
`opacity`	number	透明度，建议范围 0 ~ 1
`rotate`	number	旋转角度，单位 deg
`gapX`	number	水平平铺间距
`gapY`	number	垂直平铺间距
`position`	'top' \| 'bottom'	显示在文档上方或下方
`width`	string \| number	水印容器宽度
`height`	string \| number	水印容器高度

文本水印示例

                  const viewer = createViewer({
  target: '#viewer',
  file: '/demo/confidential.pdf',
  watermark: {
    type: 'text',
    content: '内部资料 严禁外传',
    fontSize: 20,
    color: '#bfbfbf',
    opacity: 0.22,
    rotate: -25,
    gapX: 140,
    gapY: 90,
    position: 'top'
  }
})
                

图片水印示例

                  const viewer = createViewer({
  target: '#viewer',
  file: '/demo/report.pdf',
  watermark: {
    type: 'image',
    image: '/assets/company-logo.png',
    imageWidth: 96,
    imageHeight: 96,
    opacity: 0.16,
    rotate: -20,
    gapX: 180,
    gapY: 120,
    position: 'bottom'
  }
})
                

实例方法

生命周期

方法	参数	说明
`mount(target)`	HTMLElement \| string	挂载到指定元素
`destroy()`	-	销毁实例

文件操作

方法	参数	说明
`setFile(file, filename?)`	FileSource, string?	设置预览文件
`getFile()`	-	获取当前文件信息
`download()`	-	下载文件

视图操作

方法	参数	说明
`zoom(scale)`	number	设置缩放比例 (0.1 - 5)
`rotate(degree)`	number	设置旋转角度
`reset()`	-	重置缩放和旋转
`fullscreen(enable?)`	boolean?	切换全屏模式
`prevPage()`	-	上一页（PDF/PPT）
`nextPage()`	-	下一页（PDF/PPT）
`gotoPage(page)`	number	跳转到指定页
`getPageInfo()`	-	获取分页信息

配置

方法	参数	说明
`setTheme(theme)`	'light'\|'dark'	设置主题
`setLocale(locale)`	'zh-CN'\|'en'	设置语言
`setToolbar(config)`	boolean/object	设置工具栏

事件

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

事件监听示例

                // 使用 on 方法监听事件
viewer.on('ready', () => {
  console.log('Viewer is ready');
});

viewer.on('load', () => {
  console.log('File loaded');
  const state = viewer.getState();
  console.log('当前状态:', state);
});

viewer.on('error', (err) => {
  console.error('发生错误:', err);
});
              

支持的文件格式

全面覆盖常见文档格式

PDF .pdf

DOCX .docx

XLSX .xlsx, .xls

CSV .csv

PPTX .pptx, .ppt

OFD .ofd

DXF .dxf

MD .md, .markdown

TXT .txt

HTML .html, .htm

IMG .png, .jpg, .gif...

VIDEO .mp4, .mov, .webm

AUDIO .mp3, .wav, .ogg

CODE .js, .css, .json...

使用示例

多种使用场景的完整示例代码

URL预览

预览远程文件

通过 URL 地址预览远程文档

              const viewer = JitViewer.createViewer({
  file: 'https://example.com/doc.pdf',
  filename: '文档.pdf',
  toolbar: true
});
viewer.mount('#viewer');
            

本地上传

预览本地文件

通过文件选择器预览本地文件

              document.getElementById('fileInput')
  .addEventListener('change', (e) => {
    const file = e.target.files[0];
    const viewer = JitViewer.createViewer({
      file: file,
      filename: file.name
    });
    viewer.mount('#viewer');
  });
            

缩放控制

自定义缩放控制

程序化控制文档缩放和旋转

              // 放大
function zoomIn() {
  const state = viewer.getState();
  viewer.zoom(state.zoom + 0.1);
}

// 旋转
function rotate() {
  const state = viewer.getState();
  viewer.rotate((state.rotate + 90) % 360);
}
            

主题切换

动态切换主题

在浅色和深色主题间切换

              // 切换到深色主题
function switchToDark() {
  viewer.setTheme('dark');
}

// 切换到浅色主题
function switchToLight() {
  viewer.setTheme('light');
}
            

反馈与支持

遇到问题或有功能建议？欢迎通过以下渠道联系我们

跨框架文档预览 SDK

功能特性

一行代码集成

多格式支持

丰富的控制 API

明暗主题切换

移动端适配

多种文件源

跨框架兼容

零依赖打包

国际化支持

在线演示

快速开始

V Vue3 使用方式

R React 使用方式

引入 SDK 文件

创建预览容器

初始化预览器

API 文档

createViewer(options)

WatermarkConfig

文本水印示例

图片水印示例

实例方法

生命周期

文件操作

视图操作

配置

事件

事件监听示例

支持的文件格式

使用示例

预览远程文件

预览本地文件

自定义缩放控制

动态切换主题

源码授权

反馈与支持