JitViewer SDK - 多格式文档预览解决方案

功能特性

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

一行代码集成

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

多格式支持

支持 PDF、DOCX、XLSX、PPTX、TXT、Markdown 等多种常见文档格式，满足各种预览需求。

丰富的控制 API

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

明暗主题切换

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

移动端适配

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

多种文件源

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

在线演示

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

选择示例文件：

上传本地文件

API 测试：

当前演示

正在预览 PDF 示例文档。您可以尝试缩放、旋转等操作，或上传自己的文件进行预览。

快速开始

只需3步，即可在您的应用中集成 JitViewer

1

引入 SDK 文件

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

index.html

                <!-- 引入样式文件 -->
<link rel="stylesheet" href="jit-viewer.min.css">

<!-- 引入 JitViewer SDK -->
<script src="jit-viewer.min.js"></script>
              

2

创建预览容器

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

HTML

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

3

初始化预览器

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

JavaScript

                // 创建预览器实例
const viewer = JitViewer.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)

参数	类型	默认值	说明
`file`	FileSource	-	文件源（URL/File/Blob/ArrayBuffer）
`filename`	string	-	文件名
`toolbar`	boolean/object	true	工具栏配置
`theme`	'light'\|'dark'	'light'	主题
`locale`	'zh-CN'\|'en'	'zh-CN'	语言
`width`	string\|number	'100%'	宽度
`height`	string\|number	'100%'	高度
`onReady`	function	-	准备就绪回调
`onLoad`	function	-	加载完成回调
`onError`	function	-	错误回调
`renderOptions.zoom`	number	1	初始缩放比例
`renderOptions.rotate`	number	0	初始旋转角度

实例方法

生命周期

方法	参数	说明
`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);
});
              

使用示例

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

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