npm - jit-viewer - Versions diffs - 1.1.4 → 1.2.0 - Mend

jit-viewer 1.1.4 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/CHANGELOG.md +17 -0
package/README.md +79 -787
package/README.zh-CN.md +98 -336
package/dist/iife/jit-viewer.min.css +1 -1
package/dist/iife/jit-viewer.min.js +1 -1
package/dist/index.cjs +5 -5
package/dist/index.d.ts +105 -21
package/dist/index.js +745 -118
package/dist/style.css +1 -1
package/package.json +3 -2

package/README.md CHANGED Viewed

@@ -1,40 +1,39 @@
 # jit-viewer
-Document preview SDK for Vue, React, and vanilla JavaScript. Supports PDF, DOCX, XLSX/XLS, PPTX/PPT, OFD, TXT, Markdown, HTML, images, and built-in watermark rendering.
+Document preview SDK for Vue 3, React, and vanilla JavaScript.
+Supports PDF, DOCX, XLSX/XLS, CSV/TSV, PPTX/PPT, OFD, TXT, Markdown, HTML, images, video, built-in watermark rendering, and runtime-friendly request adapters.
 Chinese docs:
 - [README.zh-CN.md](./README.zh-CN.md)
-- [View on GitHub](https://github.com/jitOffice/jit-viewer-sdk/blob/main/packages/core/README.zh-CN.md)
+- [CHANGELOG.md](./CHANGELOG.md)
+## What's New
-## Changelog
+### 1.2.0 - 2026-04-02
-### 1.1.4 - 2026-03-31
+- Added CSV / TSV preview with delimiter detection and table rendering
+- Added native video preview for `mp4`, `webm`, `ogg`, `ogv`, and `mov`
+- Improved HTML, image, and file-type routing in the viewer runtime
+- Fixed CSV layout overflow so the preview stays inside the viewer container
+- Fixed video loading flow for local upload and remote preview cases
+- Hardened branding protection so CSS hiding can trigger warning and self-recovery more reliably
-- Improved HTML preview rendering for local files and remote HTML content, with responsive injected styles instead of a raw browser iframe appearance
-- Added explicit `html` and `image` preview branches to the viewer runtime, including more stable file type propagation when replacing files dynamically
-- Moved the branding footer to the bottom of the viewer with dedicated footer styles so the copyright area remains visible and consistent
-- Updated the vanilla HTML demo to load SDK assets more robustly and to support direct `.html` / `.htm` file uploads in the file picker
+See the full history in [CHANGELOG.md](./CHANGELOG.md).
 ## Features
-- Multi-format preview: PDF, Office, OFD, Markdown, HTML, images
+- Multi-format preview: PDF, Office, OFD, Markdown, HTML, images, video, CSV
 - Cross-framework usage: Vue 3, React, vanilla HTML/JS
 - Built-in toolbar: zoom, rotate, print, download, pagination
-- Theme and locale support: light / dark, zh-CN / en
+- Theme and locale support: light / dark, `zh-CN` / `en`
 - Watermark support: text watermark, image watermark, opacity, rotation, tiling gap, top/bottom layer
-- Supports local files, remote URLs, Blob, ArrayBuffer, proxy URL, and custom request adapters
+- File source support: local file, remote URL, Blob, ArrayBuffer, proxy URL, custom request adapter
 ## Installation
 ```bash
-# npm
 npm install jit-viewer
-# yarn
-yarn add jit-viewer
-# pnpm
-pnpm add jit-viewer
 ```
 ## Quick Start
@@ -57,10 +56,8 @@ let viewer: ReturnType<typeof createViewer> | null = null
 onMounted(() => {
   viewer = createViewer({
     target: containerRef.value!,
-    file: '/demo/test.pdf',
+    file: '/demo/test.csv',
     toolbar: true,
-    theme: 'light',
-    locale: 'en',
     width: '100%',
     height: 640
   })
@@ -93,11 +90,12 @@ export default function App() {
   const viewerRef = useRef<ViewerInstance | null>(null)
   useEffect(() => {
-    if (!containerRef.current) return
+    if (!containerRef.current)
+      return
     viewerRef.current = createViewer({
       target: containerRef.current,
-      file: '/demo/test.pdf',
+      file: '/demo/test.mp4',
       toolbar: true,
       height: 640
     })
@@ -120,19 +118,17 @@ export default function App() {
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>JitViewer Demo</title>
-  <link rel="stylesheet" href="https://unpkg.com/jit-viewer/dist/iife/jit-viewer.min.css" />
+  <link rel="stylesheet" href="https://unpkg.com/jit-viewer@1.2.0/dist/iife/jit-viewer.min.css" />
 </head>
 <body>
   <div id="viewer" style="width:100%;height:640px;"></div>
-  <script src="https://unpkg.com/jit-viewer/dist/iife/jit-viewer.min.js"></script>
+  <script src="https://unpkg.com/jit-viewer@1.2.0/dist/iife/jit-viewer.min.js"></script>
   <script>
     const viewer = JitViewer.createViewer({
       target: '#viewer',
       file: '/demo/test.pdf',
       toolbar: true,
-      theme: 'light',
-      locale: 'en',
       width: '100%',
       height: 640
     })
@@ -143,474 +139,54 @@ export default function App() {
 </html>
 ```
-## Watermark
-Watermarks are configured via `ViewerOptions.watermark`. They affect only the preview layer and do not modify the source file.
-### Text Watermark
-```ts
-import { createViewer } from 'jit-viewer'
-import 'jit-viewer/style.css'
-const viewer = createViewer({
-  target: '#viewer',
-  file: '/demo/confidential.pdf',
-  toolbar: true,
-  watermark: {
-    type: 'text',
-    content: 'CONFIDENTIAL',
-    fontSize: 20,
-    color: '#bfbfbf',
-    opacity: 0.22,
-    rotate: -25,
-    gapX: 140,
-    gapY: 90,
-    position: 'top'
-  }
-})
-viewer.mount()
-```
-### Image Watermark
-```ts
-import { createViewer } from 'jit-viewer'
-import 'jit-viewer/style.css'
-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'
-  }
-})
-viewer.mount()
-```
-### Vue Component Example
-```vue
-<template>
-  <Viewer
-    :file="file"
-    :toolbar="true"
-    :theme="'light'"
-    :locale="'en'"
-    :watermark="watermark"
-    width="100%"
-    height="640px"
-  />
-</template>
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Viewer } from 'jit-viewer'
-import 'jit-viewer/style.css'
-const file = ref('/demo/test.pdf')
-const watermark = ref({
-  type: 'text' as const,
-  content: 'JitViewer Demo',
-  fontSize: 18,
-  color: '#9aa5b1',
-  opacity: 0.18,
-  rotate: -30,
-  gapX: 120,
-  gapY: 80,
-  position: 'top' as const
-})
-</script>
-```
-### Re-render With Different Watermarks
-```ts
-import { createViewer, type ViewerInstance, type ViewerOptions } from 'jit-viewer'
-let viewer: ViewerInstance | null = null
-const baseOptions: ViewerOptions = {
-  target: '#viewer',
-  file: '/demo/test.pdf',
-  toolbar: true,
-  width: '100%',
-  height: 640
-}
-function renderWithWatermark(watermark: ViewerOptions['watermark']) {
-  viewer?.destroy()
-  viewer = createViewer({
-    ...baseOptions,
-    watermark
-  })
-  viewer.mount()
-}
-renderWithWatermark({
-  type: 'text',
-  content: 'First Review',
-  opacity: 0.2,
-  rotate: -20,
-  gapX: 140,
-  gapY: 90
-})
-document.querySelector('#switchImage')?.addEventListener('click', () => {
-  renderWithWatermark({
-    type: 'image',
-    image: '/assets/logo.png',
-    imageWidth: 88,
-    imageHeight: 88,
-    opacity: 0.14,
-    rotate: -18,
-    gapX: 170,
-    gapY: 110
-  })
-})
-document.querySelector('#clearWatermark')?.addEventListener('click', () => {
-  renderWithWatermark(null)
-})
-```
-## Detailed Examples
-### Example 1: Contract Preview With Top-Level Confidential Watermark
-```ts
-createViewer({
-  target: '#viewer',
-  file: '/contracts/nda.pdf',
-  filename: 'nda.pdf',
-  toolbar: true,
-  pdfRender: 'inset',
-  watermark: {
-    type: 'text',
-    content: 'CONFIDENTIAL',
-    fontSize: 24,
-    color: '#d4380d',
-    opacity: 0.18,
-    rotate: -32,
-    gapX: 130,
-    gapY: 85,
-    position: 'top'
-  }
-}).mount()
-```
-### Example 2: Handbook Preview With Brand Logo Watermark
-```ts
-createViewer({
-  target: '#viewer',
-  file: '/manuals/employee-handbook.docx',
-  toolbar: true,
-  watermark: {
-    type: 'image',
-    image: '/assets/brand-watermark.svg',
-    imageWidth: 72,
-    imageHeight: 72,
-    opacity: 0.1,
-    rotate: -15,
-    gapX: 210,
-    gapY: 140,
-    position: 'bottom'
-  }
-}).mount()
-```
-### Example 3: Remote File With Auth Headers and Watermark
-```ts
-createViewer({
-  target: '#viewer',
-  file: {
-    url: 'https://api.example.com/files/statement.pdf',
-    headers: {
-      Authorization: 'Bearer your-token'
-    }
-  },
-  requestAdapter: async (url, options) => {
-    const response = await fetch(url, {
-      method: options?.method || 'GET',
-      headers: options?.headers
-    })
-    if (!response.ok) {
-      throw new Error(`Request failed: ${response.status}`)
-    }
-    return response.arrayBuffer()
-  },
-  watermark: {
-    type: 'text',
-    content: 'Review Copy',
-    fontSize: 16,
-    color: '#7d8b99',
-    opacity: 0.16,
-    rotate: -28,
-    gapX: 150,
-    gapY: 100
-  }
-}).mount()
-```
-## API
+## Core API
 ### `createViewer(options)`
-Creates a viewer instance and returns `ViewerInstance`.
-### `ViewerOptions`
-| Option | Type | Default | Description |
-|------|------|--------|------|
-| `target` | `HTMLElement \| string` | - | Mount target |
-| `file` | `FileSource` | - | File source: URL, File, Blob, ArrayBuffer, or request object |
-| `type` | `FileType` | auto | Explicit file type |
-| `filename` | `string` | - | Display and download filename |
-| `toolbar` | `boolean \| ToolbarConfig` | `true` | Toolbar config |
-| `theme` | `'light' \| 'dark' \| ThemeConfig` | `'light'` | Theme |
-| `locale` | `'zh-CN' \| 'en' \| LocaleConfig` | `'zh-CN'` | Locale |
-| `width` | `string \| number` | `'100%'` | Viewer width |
-| `height` | `string \| number` | `'100%'` | Viewer height |
-| `className` | `string` | - | Custom class name |
-| `style` | `Record<string, string>` | - | Custom inline style |
-| `pdfRender` | `'native' \| 'inset'` | `'inset'` | PDF rendering mode |
-| `watermark` | `WatermarkConfig \| null` | `null` | Watermark config |
-| `proxyUrl` | `string` | - | Proxy URL |
-| `requestAdapter` | `RequestAdapter` | - | Custom fetch adapter |
-| `renderOptions` | `object` | - | Initial render options such as zoom, rotate, page |
-| `onReady` | `() => void` | - | Ready callback |
-| `onLoad` | `() => void` | - | Load callback |
-| `onError` | `(error: Error) => void` | - | Error callback |
-| `onDestroy` | `() => void` | - | Destroy callback |
-### `WatermarkConfig`
+Creates a viewer instance.
+Key `ViewerOptions`:
 | Option | Type | Description |
-|------|------|------|
-| `type` | `'text' \| 'image'` | Watermark type |
-| `content` | `string` | Text content for `type: 'text'` |
-| `image` | `string` | Image URL for `type: 'image'` |
-| `fontSize` | `number` | Text font size in px |
-| `color` | `string` | Text color |
-| `fontFamily` | `string` | Font family |
-| `fontWeight` | `string \| number` | Font weight |
-| `imageWidth` | `number` | Image width in px |
-| `imageHeight` | `number` | Image height in px |
-| `opacity` | `number` | Opacity, usually between `0` and `1` |
-| `rotate` | `number` | Rotation angle in deg |
-| `gapX` | `number` | Horizontal gap |
-| `gapY` | `number` | Vertical gap |
-| `position` | `'top' \| 'bottom'` | Overlay above or below document content |
-| `width` | `string \| number` | Watermark container width |
-| `height` | `string \| number` | Watermark container height |
+| --- | --- | --- |
+| `target` | `HTMLElement \| string` | Mount target |
+| `file` | `FileSource` | File source |
+| `type` | `FileType` | Explicit file type when auto detection is not enough |
+| `filename` | `string` | Display and download filename |
+| `toolbar` | `ToolbarConfig \| boolean` | Toolbar config |
+| `theme` | `Theme` | `light`, `dark`, or custom theme |
+| `locale` | `Locale` | `zh-CN`, `en`, or custom locale |
+| `watermark` | `WatermarkConfig \| null` | Preview watermark config |
+| `proxyUrl` | `string` | Custom proxy endpoint |
+| `requestAdapter` | `RequestAdapter` | Custom fetch adapter |
+| `renderOptions` | `{ zoom?: number; rotate?: number; page?: number }` | Initial render state |
 ### `ViewerInstance`
 | Method | Description |
-|------|------|
-| `mount(target?)` | Mount viewer |
-| `destroy()` | Destroy viewer |
-| `setFile(file, filename?)` | Replace current file |
+| --- | --- |
+| `mount(target?)` | Mount the viewer |
+| `destroy()` | Destroy the viewer |
+| `setFile(file, filename?)` | Replace the current file |
+| `setOptions(options)` | Update file, theme, toolbar, watermark, and runtime options |
 | `getFile()` | Get current file info |
 | `zoom(scale)` | Set zoom |
-| `rotate(degree)` | Set rotation |
-| `reset()` | Reset zoom and rotation |
+| `rotate(degree)` | Rotate content |
+| `reset()` | Reset zoom and rotate |
 | `fullscreen(enable?)` | Toggle fullscreen |
-| `prevPage()` | Previous page |
-| `nextPage()` | Next page |
-| `gotoPage(page)` | Go to page |
-| `getPageInfo()` | Get page info |
-| `print()` | Print current document |
-| `download()` | Download current document |
-| `setTheme(theme)` | Set theme |
-| `setLocale(locale)` | Set locale |
-| `setToolbar(config)` | Set toolbar |
-| `on(event, handler)` | Register event |
-| `off(event, handler)` | Remove event |
-| `getState()` | Get current state |
-## Supported File Types
-| Format | Extensions | Description |
-|------|--------|------|
-| PDF | `.pdf` | PDF files |
-| Word | `.docx` | Microsoft Word |
-| Excel | `.xlsx`, `.xls` | Microsoft Excel |
-| PowerPoint | `.pptx`, `.ppt` | Microsoft PowerPoint |
-| OFD | `.ofd` | Open Fixed-layout Document |
-| Text | `.txt` | Plain text |
-| Markdown | `.md`, `.markdown` | Markdown files |
-| HTML | `.html`, `.htm` | HTML files or web content |
-| Images | `.jpg`, `.jpeg`, `.png`, `.gif`, `.webp`, `.svg`, `.bmp`, `.tiff`, `.tif`, `.ico` | Image preview |
-## Browser Support
-- Chrome >= 80
-- Firefox >= 75
-- Safari >= 13
-- Edge >= 80
-## License
-[Apache-2.0](./LICENSE)
-## Links
-- [GitHub](https://github.com/jitOffice/jit-viewer-sdk)
-- [Homepage](https://jitword.com/jit-viewer.html)
-- [Issues](https://github.com/jitOffice/jit-viewer-sdk/issues)
----
-## 中文文档
-跨框架文档预览 SDK，支持 PDF、DOCX、XLSX/XLS、PPTX/PPT、OFD、TXT、Markdown、HTML、图片等多种格式，并内置文档水印能力。
-[Back to English](#jit-viewer)
-## 特性
-- 多格式预览：PDF、Office、OFD、Markdown、HTML、图片
-- 跨框架使用：Vue 3、React、原生 HTML/JS
-- 内置工具栏：缩放、旋转、打印、下载、分页
-- 主题与国际化：浅色 / 深色，中文 / 英文
-- 水印能力：文本水印、图片水印、透明度、旋转、平铺间距、顶层/底层显示
-- 支持本地文件、远程 URL、Blob、ArrayBuffer、自定义请求适配器
-## 安装
-```bash
-# npm
-npm install jit-viewer
-# yarn
-yarn add jit-viewer
-# pnpm
-pnpm add jit-viewer
-```
-## 快速开始
-### Vue 3
-```vue
-<template>
-  <div ref="containerRef" class="viewer-container"></div>
-</template>
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
-import { createViewer } from 'jit-viewer'
-import 'jit-viewer/style.css'
-const containerRef = ref<HTMLElement | null>(null)
-let viewer: ReturnType<typeof createViewer> | null = null
-onMounted(() => {
-  viewer = createViewer({
-    target: containerRef.value!,
-    file: '/demo/test.pdf',
-    toolbar: true,
-    theme: 'light',
-    locale: 'zh-CN',
-    width: '100%',
-    height: 640
-  })
-  viewer.mount()
-})
+| `prevPage()` / `nextPage()` / `gotoPage(page)` | Pagination controls |
+| `getPageInfo()` | Get page state |
+| `print()` | Print current view |
+| `download()` | Download current file |
+| `setTheme(theme)` | Update theme |
+| `setLocale(locale)` | Update locale |
+| `setToolbar(config)` | Update toolbar |
+| `on(event, handler)` / `off(event, handler)` | Event subscription |
+| `getState()` | Get runtime state |
-onUnmounted(() => {
-  viewer?.destroy()
-})
-</script>
-```
-### React
-```tsx
-import { useEffect, useRef } from 'react'
-import { createViewer, type ViewerInstance } from 'jit-viewer'
-import 'jit-viewer/style.css'
-export default function App() {
-  const containerRef = useRef<HTMLDivElement | null>(null)
-  const viewerRef = useRef<ViewerInstance | null>(null)
-  useEffect(() => {
-    if (!containerRef.current) return
-    viewerRef.current = createViewer({
-      target: containerRef.current,
-      file: '/demo/test.pdf',
-      toolbar: true,
-      height: 640
-    })
-    viewerRef.current.mount()
-    return () => viewerRef.current?.destroy()
-  }, [])
-  return <div ref={containerRef} style={{ width: '100%', height: 640 }} />
-}
-```
-### 原生 HTML / JS
-```html
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>JitViewer Demo</title>
-  <link rel="stylesheet" href="https://unpkg.com/jit-viewer/dist/iife/jit-viewer.min.css" />
-</head>
-<body>
-  <div id="viewer" style="width:100%;height:640px;"></div>
-  <script src="https://unpkg.com/jit-viewer/dist/iife/jit-viewer.min.js"></script>
-  <script>
-    const viewer = JitViewer.createViewer({
-      target: '#viewer',
-      file: '/demo/test.pdf',
-      toolbar: true,
-      theme: 'light',
-      locale: 'zh-CN',
-      width: '100%',
-      height: 640
-    })
-    viewer.mount()
-  </script>
-</body>
-</html>
-```
-## 水印使用
-水印通过 `ViewerOptions.watermark` 配置，支持文本水印和图片水印。水印只作用于预览层，不会修改原始文件内容。
+## Watermark
-### 文本水印
+Watermarks are configured with `ViewerOptions.watermark`. They apply only to the preview layer and do not modify the original file.
 ```ts
 import { createViewer } from 'jit-viewer'
@@ -618,15 +194,12 @@ import 'jit-viewer/style.css'
 const viewer = createViewer({
   target: '#viewer',
-  file: '/demo/confidential.pdf',
-  toolbar: true,
+  file: '/demo/report.pdf',
   watermark: {
     type: 'text',
-    content: '内部资料 严禁外传',
-    fontSize: 20,
-    color: '#bfbfbf',
-    opacity: 0.22,
-    rotate: -25,
+    content: 'CONFIDENTIAL',
+    opacity: 0.18,
+    rotate: -24,
     gapX: 140,
     gapY: 90,
     position: 'top'
@@ -636,306 +209,25 @@ const viewer = createViewer({
 viewer.mount()
 ```
-### 图片水印
-```ts
-import { createViewer } from 'jit-viewer'
-import 'jit-viewer/style.css'
-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'
-  }
-})
-viewer.mount()
-```
-### Vue 组件方式
-```vue
-<template>
-  <Viewer
-    :file="file"
-    :toolbar="true"
-    :theme="'light'"
-    :locale="'zh-CN'"
-    :watermark="watermark"
-    width="100%"
-    height="640px"
-  />
-</template>
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Viewer } from 'jit-viewer'
-import 'jit-viewer/style.css'
-const file = ref('/demo/test.pdf')
-const watermark = ref({
-  type: 'text' as const,
-  content: 'JitViewer Demo',
-  fontSize: 18,
-  color: '#9aa5b1',
-  opacity: 0.18,
-  rotate: -30,
-  gapX: 120,
-  gapY: 80,
-  position: 'top' as const
-})
-</script>
-```
-### 动态切换不同水印
-```ts
-import { createViewer, type ViewerInstance, type ViewerOptions } from 'jit-viewer'
-let viewer: ViewerInstance | null = null
-const baseOptions: ViewerOptions = {
-  target: '#viewer',
-  file: '/demo/test.pdf',
-  toolbar: true,
-  width: '100%',
-  height: 640
-}
-function renderWithWatermark(watermark: ViewerOptions['watermark']) {
-  viewer?.destroy()
-  viewer = createViewer({
-    ...baseOptions,
-    watermark
-  })
-  viewer.mount()
-}
-renderWithWatermark({
-  type: 'text',
-  content: '首次预览',
-  opacity: 0.2,
-  rotate: -20,
-  gapX: 140,
-  gapY: 90
-})
-document.querySelector('#switchImage')?.addEventListener('click', () => {
-  renderWithWatermark({
-    type: 'image',
-    image: '/assets/logo.png',
-    imageWidth: 88,
-    imageHeight: 88,
-    opacity: 0.14,
-    rotate: -18,
-    gapX: 170,
-    gapY: 110
-  })
-})
-document.querySelector('#clearWatermark')?.addEventListener('click', () => {
-  renderWithWatermark(null)
-})
-```
-## 详细示例
-### 示例 1：合同预览 + 顶层保密文本水印
-```ts
-createViewer({
-  target: '#viewer',
-  file: '/contracts/nda.pdf',
-  filename: 'nda.pdf',
-  toolbar: true,
-  pdfRender: 'inset',
-  watermark: {
-    type: 'text',
-    content: 'CONFIDENTIAL',
-    fontSize: 24,
-    color: '#d4380d',
-    opacity: 0.18,
-    rotate: -32,
-    gapX: 130,
-    gapY: 85,
-    position: 'top'
-  }
-}).mount()
-```
-### 示例 2：员工手册预览 + 底层品牌 Logo 水印
-```ts
-createViewer({
-  target: '#viewer',
-  file: '/manuals/employee-handbook.docx',
-  toolbar: true,
-  watermark: {
-    type: 'image',
-    image: '/assets/brand-watermark.svg',
-    imageWidth: 72,
-    imageHeight: 72,
-    opacity: 0.1,
-    rotate: -15,
-    gapX: 210,
-    gapY: 140,
-    position: 'bottom'
-  }
-}).mount()
-```
-### 示例 3：自定义请求头 + 水印
-```ts
-createViewer({
-  target: '#viewer',
-  file: {
-    url: 'https://api.example.com/files/statement.pdf',
-    headers: {
-      Authorization: 'Bearer your-token'
-    }
-  },
-  requestAdapter: async (url, options) => {
-    const response = await fetch(url, {
-      method: options?.method || 'GET',
-      headers: options?.headers
-    })
+## Supported Formats
-    if (!response.ok) {
-      throw new Error(`Request failed: ${response.status}`)
-    }
+| Type | Extensions |
+| --- | --- |
+| PDF | `.pdf` |
+| Word | `.docx` |
+| Excel | `.xlsx`, `.xls` |
+| CSV | `.csv`, `.tsv` |
+| PowerPoint | `.pptx`, `.ppt` |
+| OFD | `.ofd` |
+| Text | `.txt` |
+| Markdown | `.md`, `.markdown` |
+| HTML | `.html`, `.htm` |
+| Images | `.jpg`, `.jpeg`, `.png`, `.gif`, `.webp`, `.svg`, `.bmp`, `.tiff`, `.tif`, `.ico` |
+| Video | `.mp4`, `.webm`, `.ogg`, `.ogv`, `.mov` |
-    return response.arrayBuffer()
-  },
-  watermark: {
-    type: 'text',
-    content: '审阅版',
-    fontSize: 16,
-    color: '#7d8b99',
-    opacity: 0.16,
-    rotate: -28,
-    gapX: 150,
-    gapY: 100
-  }
-}).mount()
-```
-## API
-### `createViewer(options)`
-创建预览器实例，返回 `ViewerInstance`。
-### `ViewerOptions`
-| 参数 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `target` | `HTMLElement \| string` | - | 挂载目标元素 |
-| `file` | `FileSource` | - | 文件源，支持 URL、File、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` | `() => void` | - | 预览器就绪回调 |
-| `onLoad` | `() => void` | - | 文件加载完成回调 |
-| `onError` | `(error: Error) => void` | - | 错误回调 |
-| `onDestroy` | `() => void` | - | 销毁回调 |
-### `WatermarkConfig`
-| 参数 | 类型 | 说明 |
-|------|------|------|
-| `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` | 水印容器高度 |
-### `ViewerInstance`
-| 方法 | 说明 |
-|------|------|
-| `mount(target?)` | 挂载到目标容器 |
-| `destroy()` | 销毁实例 |
-| `setFile(file, filename?)` | 动态切换文件 |
-| `getFile()` | 获取当前文件信息 |
-| `zoom(scale)` | 设置缩放比例 |
-| `rotate(degree)` | 设置旋转角度 |
-| `reset()` | 重置缩放和旋转 |
-| `fullscreen(enable?)` | 切换全屏 |
-| `prevPage()` | 上一页 |
-| `nextPage()` | 下一页 |
-| `gotoPage(page)` | 跳转到指定页 |
-| `getPageInfo()` | 获取页码信息 |
-| `print()` | 打印当前文档 |
-| `download()` | 下载当前文档 |
-| `setTheme(theme)` | 设置主题 |
-| `setLocale(locale)` | 设置语言 |
-| `setToolbar(config)` | 设置工具栏 |
-| `on(event, handler)` | 监听事件 |
-| `off(event, handler)` | 取消监听事件 |
-| `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 文档 |
-| HTML | `.html`, `.htm` | HTML 文件或网页内容 |
-| 图片 | `.jpg`, `.jpeg`, `.png`, `.gif`, `.webp`, `.svg`, `.bmp`, `.tiff`, `.tif`, `.ico` | 图片预览 |
-## 浏览器支持
-- Chrome >= 80
-- Firefox >= 75
-- Safari >= 13
-- Edge >= 80
-## 许可证
-[Apache-2.0](./LICENSE)
-## 链接
+## Links
+- [Chinese README](./README.zh-CN.md)
+- [Changelog](./CHANGELOG.md)
 - [GitHub](https://github.com/jitOffice/jit-viewer-sdk)
-- [主页](https://jitword.com/jit-viewer.html)
-- [问题反馈](https://github.com/jitOffice/jit-viewer-sdk/issues)
+- [Homepage](https://jitword.com/jit-viewer.html)