### Install Jit-Viewer SDK

Source: https://jitword.com/jit-viewer.html?mode=light#api

Install the Jit-Viewer SDK using npm, yarn, or pnpm.

```bash
# npm
npm install jit-viewer

# yarn
yarn add jit-viewer

# pnpm
pnpm add jit-viewer
```

--------------------------------

### Usage Examples

Source: https://jitword.com/jit-viewer.html?mode=light#api

Practical examples demonstrating how to use JitViewer in different scenarios.

```APIDOC
## Usage Examples

### Previewing Remote Files via URL

This example shows how to preview a document directly from a URL.

```javascript
const viewer = JitViewer.createViewer({
  file: 'https://example.com/path/to/remote/document.pdf',
  filename: 'RemoteDocument.pdf',
  toolbar: true // Enable the toolbar
});

// Mount the viewer to a specific element on your page
viewer.mount('#viewer-container');
```

### Previewing Local Files from User Upload

This example demonstrates how to preview a file selected by the user through an input element.

```html
<input type="file" id="fileInput">
<div id="viewer-container"></div>
```

```javascript
document.getElementById('fileInput').addEventListener('change', (event) => {
  const file = event.target.files[0];
  if (file) {
    const viewer = JitViewer.createViewer({
      file: file,
      filename: file.name // Use the selected file's name
    });
    viewer.mount('#viewer-container');
  }
});
```

### Programmatic Zoom and Rotation Control

Control the viewer's zoom and rotation programmatically.

```javascript
// Assuming 'viewer' is an initialized JitViewer instance

function zoomIn() {
  const state = viewer.getState(); // Get current state
  viewer.zoom(state.zoom + 0.1); // Increase zoom by 0.1
}

function rotateDocument() {
  const state = viewer.getState();
  viewer.rotate((state.rotate + 90) % 360); // Rotate by 90 degrees, wrapping around 360
}
```

### Dynamic Theme Switching

Switch between light and dark themes dynamically.

```javascript
// Assuming 'viewer' is an initialized JitViewer instance

function switchToDarkMode() {
  viewer.setTheme('dark');
}

function switchToLightMode() {
  viewer.setTheme('light');
}
```
```

--------------------------------

### Usage Examples

Source: https://jitword.com/jit-viewer.html?mode=light

Practical examples demonstrating how to use JitViewer in common scenarios.

```APIDOC
## Usage Examples

### Previewing Remote Files via URL

This example shows how to create a viewer for a document hosted at a remote URL.

```javascript
const viewer = JitViewer.createViewer({
  file: 'https://example.com/path/to/your/document.pdf',
  filename: 'RemoteDocument.pdf',
  toolbar: true // Enable the toolbar
});

// Mount the viewer to a specific DOM element
viewer.mount('#viewer-container');
```

### Previewing Local Files from User Upload

This example demonstrates how to preview a file selected by the user through an input element.

```javascript
document.getElementById('fileInput').addEventListener('change', (event) => {
  const file = event.target.files[0];
  if (file) {
    const viewer = JitViewer.createViewer({
      file: file,
      filename: file.name // Use the selected file's name
    });
    viewer.mount('#viewer-container');
  }
});
```

### Programmatic Zoom and Rotation Control

Example of controlling the viewer's zoom and rotation programmatically.

```javascript
// Assuming 'viewer' is an initialized JitViewer instance

function zoomIn() {
  const currentState = viewer.getState(); // Get current state (zoom, rotate, etc.)
  viewer.zoom(currentState.zoom + 0.1);
}

function rotateClockwise() {
  const currentState = viewer.getState();
  viewer.rotate((currentState.rotate + 90) % 360);
}

// You would typically attach these functions to buttons or other UI elements.
```

### Dynamic Theme Switching

Demonstrates how to switch between light and dark themes at runtime.

```javascript
// Assuming 'viewer' is an initialized JitViewer instance

function switchToDarkMode() {
  viewer.setTheme('dark');
}

function switchToLightMode() {
  viewer.setTheme('light');
}
```
```

--------------------------------

### Installation

Source: https://jitword.com/jit-viewer.html?mode=light#api

Instructions for installing the JitWord Viewer SDK using npm, yarn, or pnpm.

```APIDOC
## Installation

Supports npm, yarn, and pnpm package managers.

### npm
```bash
npm install jit-viewer
```

### yarn
```bash
yarn add jit-viewer
```

### pnpm
```bash
pnpm add jit-viewer
```
```

--------------------------------

### Usage Examples

Source: https://jitword.com/jit-viewer.html

Demonstrates common use cases for the JitViewer library.

```APIDOC
## Usage Examples

### Previewing Remote Files
Preview documents directly from a URL.
```javascript
const viewer = JitViewer.createViewer({
  file: 'https://example.com/doc.pdf',
  filename: 'document.pdf',
  toolbar: true
});
viewer.mount('#viewer');
```

### Previewing Local Files
Allow users to upload and preview local files.
```javascript
document.getElementById('fileInput')
  .addEventListener('change', (e) => {
    const file = e.target.files[0];
    const viewer = JitViewer.createViewer({
      file: file,
      filename: file.name
    });
    viewer.mount('#viewer');
  });
```

### Programmatic Zoom and Rotate Control
Control the view programmatically.
```javascript
// Zoom In
function zoomIn() {
  const state = viewer.getState();
  viewer.zoom(state.zoom + 0.1);
}

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

### Dynamic Theme Switching
Switch between light and dark themes.
```javascript
// Switch to Dark Theme
function switchToDark() {
  viewer.setTheme('dark');
}

// Switch to Light Theme
function switchToLight() {
  viewer.setTheme('light');
}
```
```

--------------------------------

### React Usage

Source: https://jitword.com/jit-viewer.html?mode=light#api

Example of how to integrate and use the JitWord Viewer SDK within a React application.

```APIDOC
## React Usage

Integrate the JitWord Viewer component in your React application.

### DocumentViewer.tsx
```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' }} />
}
```
```

--------------------------------

### Vue3 Usage Example

Source: https://jitword.com/jit-viewer.html?mode=light#api

Integrate the JitWord Viewer in a Vue3 application. Ensure the target DOM element is available and the viewer is mounted and destroyed properly.

```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>
```

--------------------------------

### Vue3 Usage

Source: https://jitword.com/jit-viewer.html

Example of integrating JitWord Viewer in a Vue3 application.

```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>
```

--------------------------------

### React Usage Example

Source: https://jitword.com/jit-viewer.html?mode=light#api

Integrate the JitWord Viewer in a React application. The viewer is created and mounted within a useEffect hook, and destroyed on component unmount.

```typescript
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' }} />
}
```

--------------------------------

### Vue3 Usage

Source: https://jitword.com/jit-viewer.html?mode=light#api

Example of how to integrate and use the JitWord Viewer SDK within a Vue3 application.

```APIDOC
## Vue3 Usage

Integrate the JitWord Viewer component in your Vue3 application.

### DocumentViewer.vue
```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>
```
```

--------------------------------

### Event Listener Example

Source: https://jitword.com/jit-viewer.html?mode=light#api

Attach event listeners to the viewer instance using the 'on' method to react to component lifecycle events like 'ready', 'load', 'error', and 'destroy'.

```javascript
// 使用 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);
});
```

--------------------------------

### Programmatic Zoom and Rotate Control

Source: https://jitword.com/jit-viewer.html

Control document zoom and rotation programmatically using instance methods. The 'zoom' method accepts a scale factor, and 'rotate' accepts degrees. Use 'getState()' to get current zoom and rotation values.

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

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

--------------------------------

### Initialize Viewer with Options

Source: https://jitword.com/jit-viewer.html?mode=light#api

Initialize the JitViewer instance with configuration options and mount it to the specified container.

```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');
```

--------------------------------

### Initialize Viewer with Options

Source: https://jitword.com/jit-viewer.html

Initialize the JitViewer instance with configuration options and mount it to the specified DOM element. The `createViewer` function is available globally after including the CDN script.

```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');
```

--------------------------------

### Viewer Instance Methods

Source: https://jitword.com/jit-viewer.html?mode=light

Available methods for controlling the JitWord Viewer instance after initialization.

```APIDOC
## Viewer Instance Methods

### Instance Methods

- **mount()**: Mounts the viewer to the specified target element.
- **destroy()**: Destroys the viewer instance and cleans up resources.
- **load(file: string | File | Blob | ArrayBuffer)**: Loads a new file into the viewer.
- **setTheme(theme: 'light' | 'dark')**: Sets the viewer's theme.
- **setToolbar(visible: boolean)**: Toggles the visibility of the toolbar.
- **zoomIn()**: Zooms the document in.
- **zoomOut()**: Zooms the document out.
- **rotate(degrees: number)**: Rotates the document by the specified degrees.
- **goToPage(pageNumber: number)**: Navigates to a specific page number.
- **download(filename?: string)**: Initiates the download of the current document.
```

--------------------------------

### createViewer(options)

Source: https://jitword.com/jit-viewer.html?mode=light#api

Initializes a new JitViewer instance with the specified options.

```APIDOC
## createViewer(options)

### Description
Initializes a new JitViewer instance with the specified options.

### Parameters
#### Request Body
- **target** (HTMLElement | string) - Required - The DOM element or selector where the viewer will be mounted.
- **file** (FileSource) - Required - The source of the file to be previewed (local file, URL, Blob, ArrayBuffer, etc.).
- **type** (FileType) - Optional - Automatically detected, but can be manually specified.
- **filename** (string) - Optional - The name of the file.
- **toolbar** (boolean | ToolbarConfig) - Optional - Configures the viewer's toolbar. Defaults to true.
- **theme** ('light' | 'dark' | ThemeConfig) - Optional - Sets the viewer's theme. Defaults to 'light'.
- **locale** ('zh-CN' | 'en' | LocaleConfig) - Optional - Sets the viewer's language. Defaults to 'zh-CN'.
- **width** (string | number) - Optional - Sets the viewer's width. Defaults to '100%'.
- **height** (string | number) - Optional - Sets the viewer's height. Defaults to '100%'.
- **className** (string) - Optional - Custom CSS class for the viewer.
- **style** (Record<string, string>) - Optional - Custom inline styles for the viewer.
- **pdfRender** ('native' | 'inset') - Optional - PDF rendering method. Defaults to 'inset'.
- **watermark** (WatermarkConfig) - Optional - Configuration for document watermarks (text or image). Defaults to null.
- **proxyUrl** (string) - Optional - Custom proxy URL for requests.
- **requestAdapter** (RequestAdapter) - Optional - Custom request adapter.
- **renderOptions** (object) - Optional - Initial rendering configurations like zoom, rotation, page number.
  - **zoom** (number) - Optional - Initial zoom level. Defaults to 1.
  - **rotate** (number) - Optional - Initial rotation angle. Defaults to 0.
- **onReady** (function) - Optional - Callback function executed when the viewer is ready.
- **onLoad** (function) - Optional - Callback function executed when the file is loaded.
- **onError** (function) - Optional - Callback function executed when an error occurs.
- **onDestroy** (function) - Optional - Callback function executed when the viewer is destroyed.

### WatermarkConfig
Watermarks are configured via `ViewerOptions.watermark` and only affect the preview layer, not the original file. Supports text and image watermarks with options for opacity, rotation, spacing, and position.

#### Parameters
- **type** ('text' | 'image') - Required - Type of watermark.
- **content** (string) - Required if type is 'text' - Content for text watermarks.
- **image** (string) - Required if type is 'image' - URL for image watermarks.
- **fontSize** (number) - Optional - Font size for text watermarks in px.
- **color** (string) - Optional - Text color for text watermarks.
- **fontFamily** (string) - Optional - Font family for text watermarks.
- **fontWeight** (string | number) - Optional - Font weight for text watermarks.
- **imageWidth** (number) - Optional - Width of the image watermark in px.
- **imageHeight** (number) - Optional - Height of the image watermark in px.
- **opacity** (number) - Optional - Opacity of the watermark (recommended range 0-1).
- **rotate** (number) - Optional - Rotation angle in degrees.
- **gapX** (number) - Optional - Horizontal spacing for tiling.
- **gapY** (number) - Optional - Vertical spacing for tiling.
- **position** ('top' | 'bottom') - Optional - Display position (top or bottom of the document).
- **width** (string | number) - Optional - Width of the watermark container.
- **height** (string | number) - Optional - Height of the watermark container.

### Request Example
```json
{
  "target": "#viewer",
  "file": "/path/to/your/document.pdf",
  "filename": "document.pdf",
  "toolbar": true,
  "theme": "light",
  "locale": "en",
  "watermark": {
    "type": "text",
    "content": "Confidential",
    "fontSize": 30,
    "color": "#ff0000",
    "opacity": 0.5,
    "rotate": -45
  }
}
```

### Response Example
(This method typically returns the viewer instance, not a JSON response)
```javascript
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'
  }
});
```
```

--------------------------------

### createViewer(options)

Source: https://jitword.com/jit-viewer.html

Initializes a new JitViewer instance with the specified options.

```APIDOC
## createViewer(options)

### Description
Initializes a new JitViewer instance with the specified options.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **target** (HTMLElement | string) - Required - The DOM element or its selector where the viewer will be mounted.
- **file** (FileSource) - Required - The source of the file to preview (local file, URL, Blob, ArrayBuffer, etc.).
- **type** (FileType) - Optional - Manually specify the file type. Defaults to auto-detection.
- **filename** (string) - Optional - The name of the file.
- **toolbar** (boolean | ToolbarConfig) - Optional - Configuration for the toolbar. Defaults to true.
- **theme** ('light' | 'dark' | ThemeConfig) - Optional - The theme for the viewer. Defaults to 'light'.
- **locale** ('zh-CN' | 'en' | LocaleConfig) - Optional - The language for the viewer. Defaults to 'zh-CN'.
- **width** (string | number) - Optional - The width of the viewer. Defaults to '100%'.
- **height** (string | number) - Optional - The height of the viewer. Defaults to '100%'.
- **className** (string) - Optional - Custom CSS class for the viewer.
- **style** (Record<string, string>) - Optional - Custom inline styles for the viewer.
- **pdfRender** ('native' | 'inset') - Optional - The rendering method for PDF files. Defaults to 'inset'.
- **watermark** (WatermarkConfig) - Optional - Configuration for document watermarks. Defaults to null.
- **proxyUrl** (string) - Optional - Custom proxy URL for requests.
- **requestAdapter** (RequestAdapter) - Optional - Custom request adapter.
- **renderOptions** (object) - Optional - Initial rendering configurations like zoom, rotation, page number.
  - **zoom** (number) - Optional - Initial zoom level. Defaults to 1.
  - **rotate** (number) - Optional - Initial rotation angle. Defaults to 0.
- **onReady** (function) - Optional - Callback function when the viewer is ready.
- **onLoad** (function) - Optional - Callback function when the file is loaded.
- **onError** (function) - Optional - Callback function when an error occurs.
- **onDestroy** (function) - Optional - Callback function when the viewer is destroyed.

### Request Example
```json
{
  "target": "#viewer",
  "file": "/path/to/your/document.pdf",
  "toolbar": true,
  "theme": "dark",
  "locale": "en"
}
```

### Response
#### Success Response (200)
- **ViewerInstance** (object) - An instance of the JitViewer.

#### Response Example
```json
{
  "viewerInstance": "..."
}
```
```

--------------------------------

### Initialize JitViewer Instance (IIFE)

Source: https://jitword.com/jit-viewer.html?mode=light

Initialize the JitViewer instance using the global JitViewer object after including the SDK via CDN. Mount it to the specified container.

```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');
```

--------------------------------

### Viewer Instance Methods

Source: https://jitword.com/jit-viewer.html?mode=light#api

Available methods for controlling the JitViewer instance after initialization.

```APIDOC
## Viewer Instance Methods

### mount()

Mounts the viewer to the specified target element.

### destroy()

Destroys the viewer instance and cleans up resources.

### loadFile(file: string | File | Blob | ArrayBuffer)

Loads a new file into the viewer.

### setZoom(level: number)

Sets the zoom level of the document.

### rotate(angle: number)

Rotates the document by the specified angle.

### goToPage(pageNumber: number)

Navigates to a specific page number.

### toggleToolbar()

Toggles the visibility of the toolbar.

### setTheme(theme: 'light' | 'dark')

Sets the theme of the viewer.
```

--------------------------------

### Viewer Configuration Options

Source: https://jitword.com/jit-viewer.html?mode=light

Details on the configuration options available when creating a JitWord Viewer instance.

```APIDOC
## Viewer Configuration Options

### Parameters

- **target** (HTMLElement | string) - Required - The DOM element or selector where the viewer will be mounted.
- **file** (string | File | Blob | ArrayBuffer) - Required - The document file to preview. Can be a URL, File object, Blob, or ArrayBuffer.
- **filename** (string) - Optional - The name of the file to display.
- **toolbar** (boolean) - Optional - Whether to display the viewer toolbar. Defaults to `false`.
- **theme** (string) - Optional - The theme for the viewer. Options: 'light', 'dark'. Defaults to 'light'.
- **width** (string | number) - Optional - The width of the viewer.
- **height** (string | number) - Optional - The height of the viewer.
- **onReady** (function) - Optional - Callback function executed when the viewer is ready.
- **onLoad** (function) - Optional - Callback function executed when the file has finished loading.
- **onError** (function) - Optional - Callback function executed when an error occurs. Receives an error object as an argument.
```

--------------------------------

### Instance Methods

Source: https://jitword.com/jit-viewer.html?mode=light#api

Methods available on the JitViewer instance for controlling the viewer's behavior and state.

```APIDOC
## Instance Methods

### Lifecycle Methods

#### mount(target)
- **Description**: Mounts the viewer to the specified DOM element.
- **Parameters**:
  - **target** (HTMLElement | string) - Required - The DOM element or selector to mount the viewer to.

#### destroy()
- **Description**: Destroys the viewer instance and cleans up resources.
- **Parameters**: None.

### File Operations

#### setFile(file, filename?)
- **Description**: Sets a new file to be previewed in the viewer.
- **Parameters**:
  - **file** (FileSource) - Required - The source of the new file.
  - **filename** (string) - Optional - The name of the new file.

#### getFile()
- **Description**: Retrieves information about the currently loaded file.
- **Parameters**: None.
- **Returns**: Object - Information about the current file.

#### download()
- **Description**: Initiates the download of the current file.
- **Parameters**: None.

### Viewport Operations

#### zoom(scale)
- **Description**: Sets the zoom level of the viewer.
- **Parameters**:
  - **scale** (number) - Required - The zoom scale (e.g., 0.5 for 50%, 1.5 for 150%). Range: 0.1 - 5.

#### rotate(degree)
- **Description**: Rotates the viewer content.
- **Parameters**:
  - **degree** (number) - Required - The rotation angle in degrees.

#### reset()
- **Description**: Resets the zoom and rotation to their default values.
- **Parameters**: None.

#### fullscreen(enable?)
- **Description**: Toggles fullscreen mode for the viewer.
- **Parameters**:
  - **enable** (boolean) - Optional - Whether to enable fullscreen. If not provided, it toggles the state.

#### prevPage()
- **Description**: Navigates to the previous page (for paginated documents like PDF/PPT).
- **Parameters**: None.

#### nextPage()
- **Description**: Navigates to the next page (for paginated documents like PDF/PPT).
- **Parameters**: None.

#### gotoPage(page)
- **Description**: Navigates to a specific page.
- **Parameters**:
  - **page** (number) - Required - The page number to navigate to.

#### getPageInfo()
- **Description**: Retrieves information about the current pagination (e.g., current page, total pages).
- **Parameters**: None.
- **Returns**: Object - Pagination information.

### Configuration Methods

#### setTheme(theme)
- **Description**: Dynamically changes the viewer's theme.
- **Parameters**:
  - **theme** ('light' | 'dark') - Required - The theme to apply.

#### setLocale(locale)
- **Description**: Dynamically changes the viewer's language.
- **Parameters**:
  - **locale** ('zh-CN' | 'en') - Required - The locale to apply.

#### setToolbar(config)
- **Description**: Configures or shows/hides the viewer's toolbar.
- **Parameters**:
  - **config** (boolean | object) - Required - `true` to show default toolbar, `false` to hide, or a `ToolbarConfig` object for custom configuration.

### Example Usage of Methods
```javascript
// Assuming 'viewer' is an existing JitViewer instance

// Mount the viewer
// viewer.mount('#viewer');

// Set a new file
// viewer.setFile('/new/document.docx');

// Zoom in
// viewer.zoom(1.2);

// Rotate 90 degrees
// viewer.rotate(90);

// Go to page 5
// viewer.gotoPage(5);

// Switch to dark theme
// viewer.setTheme('dark');

// Destroy the viewer
// viewer.destroy();
```
```

--------------------------------

### Include SDK Files via CDN

Source: https://jitword.com/jit-viewer.html?mode=light#api

Include the JitViewer CSS and JavaScript files in your HTML using CDN links.

```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>
```

--------------------------------

### Viewer Configuration Options

Source: https://jitword.com/jit-viewer.html?mode=light#api

Details on the configuration options available when creating a JitViewer instance.

```APIDOC
## Viewer Configuration Options

### Parameters

- **target** (HTMLElement | string) - Required - The DOM element or selector where the viewer will be mounted.
- **file** (string | File | Blob | ArrayBuffer) - Required - The document file to preview. Can be a URL, File object, Blob, or ArrayBuffer.
- **filename** (string) - Optional - The name of the file to display.
- **toolbar** (boolean) - Optional - Whether to display the viewer toolbar. Defaults to `false`.
- **theme** (string) - Optional - The theme for the viewer ('light' or 'dark'). Defaults to 'light'.
- **width** (string | number) - Optional - The width of the viewer.
- **height** (string | number) - Optional - The height of the viewer.
- **onReady** (function) - Optional - Callback function executed when the viewer is ready.
- **onLoad** (function) - Optional - Callback function executed when a file has finished loading.
- **onError** (function) - Optional - Callback function executed when an error occurs. Receives an error object as an argument.

### Request Example

```json
{
  "target": "#viewer",
  "file": "https://example.com/report.docx",
  "theme": "dark",
  "toolbar": true,
  "width": "100%",
  "height": "700px",
  "onReady": () => console.log('Viewer is ready!'),
  "onLoad": () => console.log('Document loaded successfully.')
}
```
```

--------------------------------

### Create Preview Container

Source: https://jitword.com/jit-viewer.html?mode=light#api

Add a div element to your HTML to serve as the container for the viewer.

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

--------------------------------

### CDN Usage

Source: https://jitword.com/jit-viewer.html?mode=light#api

Instructions for using the JitWord Viewer SDK via CDN in plain HTML.

```APIDOC
## CDN Usage

Use JitViewer SDK via CDN in your HTML file.

### 1. Include SDK Files

```html
<!-- Import CSS file -->
<link rel="stylesheet" href="https://unpkg.com/jit-viewer/dist/iife/jit-viewer.min.css">

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

### 2. Create Preview Container

Add a container element in your HTML.

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

### 3. Initialize Viewer

Use `JitViewer.createViewer` to initialize and mount the viewer.

```javascript
const { createViewer } = JitViewer;

// Create Viewer instance
const viewer = createViewer({
  file: 'document.pdf',      // File URL
  filename: 'document.pdf',  // Filename (optional)
  toolbar: true,             // Show toolbar
  theme: 'light',            // Theme
  width: '100%',
  height: '600px',
  onReady: () => console.log('Ready'),
  onLoad: () => console.log('Loaded'),
  onError: (err) => console.error('Error:', err)
});

// Mount to DOM
viewer.mount('#viewer');
```
```

--------------------------------

### Viewer Instance Methods

Source: https://jitword.com/jit-viewer.html

Methods available on the JitViewer instance for managing the viewer and its content.

```APIDOC
## Viewer Instance Methods

### Mount and Destroy

#### mount(target)
- **Description**: Mounts the viewer to a specified DOM element.
- **Parameters**:
  - **target** (HTMLElement | string) - Required - The DOM element or its selector to mount the viewer to.

#### destroy()
- **Description**: Destroys the viewer instance and cleans up resources.
- **Parameters**: None

### File Operations

#### setFile(file, filename?)
- **Description**: Sets a new file to be previewed.
- **Parameters**:
  - **file** (FileSource) - Required - The source of the new file.
  - **filename** (string) - Optional - The name of the new file.

#### getFile()
- **Description**: Retrieves information about the currently loaded file.
- **Parameters**: None
- **Returns**: Object containing file information.

#### download()
- **Description**: Initiates the download of the current file.
- **Parameters**: None

### View Operations

#### zoom(scale)
- **Description**: Adjusts the zoom level of the viewer.
- **Parameters**:
  - **scale** (number) - Required - The zoom scale (e.g., 0.1 to 5).

#### rotate(degree)
- **Description**: Rotates the current view.
- **Parameters**:
  - **degree** (number) - Required - The rotation angle in degrees.

#### reset()
- **Description**: Resets the zoom and rotation to their default values.
- **Parameters**: None

#### fullscreen(enable?)
- **Description**: Toggles fullscreen mode for the viewer.
- **Parameters**:
  - **enable** (boolean) - Optional - Whether to enable fullscreen. Defaults to toggling the current state.

#### prevPage()
- **Description**: Navigates to the previous page (for paginated documents like PDF/PPT).
- **Parameters**: None

#### nextPage()
- **Description**: Navigates to the next page (for paginated documents like PDF/PPT).
- **Parameters**: None

#### gotoPage(page)
- **Description**: Navigates to a specific page.
- **Parameters**:
  - **page** (number) - Required - The page number to navigate to.

#### getPageInfo()
- **Description**: Retrieves information about the current pagination.
- **Parameters**: None
- **Returns**: Object containing page information.

### Configuration

#### setTheme(theme)
- **Description**: Sets the theme of the viewer.
- **Parameters**:
  - **theme** ('light' | 'dark') - Required - The theme to apply.

#### setLocale(locale)
- **Description**: Sets the language for the viewer.
- **Parameters**:
  - **locale** ('zh-CN' | 'en') - Required - The locale to apply.

#### setToolbar(config)
- **Description**: Configures or shows/hides the toolbar.
- **Parameters**:
  - **config** (boolean | object) - Required - True to show default toolbar, false to hide, or a configuration object.

```

--------------------------------

### CDN Usage

Source: https://jitword.com/jit-viewer.html

How to use JitWord Viewer via CDN in HTML.

```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>

<!-- 创建预览容器 -->
<div id="viewer" style="width: 100%; height: 600px;"></div>

<!-- 初始化预览器 -->
<script>
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');
</script>
```

--------------------------------

### Viewer Instance Methods

Source: https://jitword.com/jit-viewer.html?mode=light

Methods available on the JitViewer instance for controlling its behavior and state.

```APIDOC
## Viewer Instance Methods

### Instance Methods

#### Lifecycle

##### mount(target)
- **Description**: Mounts the viewer to the specified target element.
- **Parameters**:
  - **target** (HTMLElement | string) - Required - The DOM element or its selector to mount the viewer to.

##### destroy()
- **Description**: Destroys the viewer instance, releasing resources.
- **Parameters**: None.

#### File Operations

##### setFile(file, filename?)
- **Description**: Sets a new file to be previewed in the viewer.
- **Parameters**:
  - **file** (FileSource) - Required - The source of the new file.
  - **filename** (string) - Optional - The name of the new file.

##### getFile()
- **Description**: Retrieves information about the currently loaded file.
- **Parameters**: None.
- **Returns**: An object containing file information.

##### download()
- **Description**: Initiates the download of the current file.
- **Parameters**: None.

#### View Operations

##### zoom(scale)
- **Description**: Sets the zoom level of the viewer.
- **Parameters**:
  - **scale** (number) - Required - The desired zoom scale (e.g., 0.1 to 5).

##### rotate(degree)
- **Description**: Rotates the current view.
- **Parameters**:
  - **degree** (number) - Required - The rotation angle in degrees.

##### reset()
- **Description**: Resets the zoom and rotation to their default values.
- **Parameters**: None.

##### fullscreen(enable?)
- **Description**: Toggles fullscreen mode for the viewer.
- **Parameters**:
  - **enable** (boolean) - Optional - `true` to enable fullscreen, `false` to disable.

##### prevPage()
- **Description**: Navigates to the previous page (for paginated documents like PDF/PPT).
- **Parameters**: None.

##### nextPage()
- **Description**: Navigates to the next page (for paginated documents like PDF/PPT).
- **Parameters**: None.

##### gotoPage(page)
- **Description**: Navigates to a specific page.
- **Parameters**:
  - **page** (number) - Required - The page number to navigate to.

##### getPageInfo()
- **Description**: Retrieves information about the current pagination.
- **Parameters**: None.
- **Returns**: An object containing page information.

#### Configuration

##### setTheme(theme)
- **Description**: Dynamically sets the theme of the viewer.
- **Parameters**:
  - **theme** ('light' | 'dark') - Required - The theme to apply.

##### setLocale(locale)
- **Description**: Dynamically sets the language of the viewer.
- **Parameters**:
  - **locale** ('zh-CN' | 'en') - Required - The locale to apply.

##### setToolbar(config)
- **Description**: Configures or shows/hides the viewer's toolbar.
- **Parameters**:
  - **config** (boolean | object) - Required - `true` to show default toolbar, `false` to hide, or a `ToolbarConfig` object.

### Request Example
```javascript
// Assuming 'viewer' is an existing JitViewer instance

// Mount the viewer
viewer.mount('#viewer-container');

// Change file
viewer.setFile('/new/document.docx');

// Zoom in
viewer.zoom(1.5);

// Go to page 5
viewer.gotoPage(5);

// Switch to dark theme
viewer.setTheme('dark');

// Destroy the viewer when done
// viewer.destroy();
```

### Response
#### Success Response (200)
- **Void** - Most methods do not return a value, but modify the viewer's state or UI.

#### Response Example
```javascript
// Methods like zoom, rotate, setTheme, etc., modify the viewer in place.
// For example, after calling viewer.zoom(1.5), the viewer's content will be scaled.
```
```

--------------------------------

### Create Viewer for Local File Upload

Source: https://jitword.com/jit-viewer.html?mode=light#api

Preview a local file selected by the user. This involves adding an event listener to a file input element to capture the selected file and create a viewer instance.

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

--------------------------------

### Create Viewer with Image Watermark

Source: https://jitword.com/jit-viewer.html?mode=light#api

Configure a viewer with image-based watermarks. Set 'type' to 'image' and specify the image source, dimensions, and appearance properties.

```javascript
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'
  }
})
```

--------------------------------

### Create Viewer for Remote URL

Source: https://jitword.com/jit-viewer.html?mode=light#api

Preview a remote document by providing its URL to the 'file' option. The 'filename' and 'toolbar' options are also demonstrated.

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

--------------------------------

### Switch to Light Theme

Source: https://jitword.com/jit-viewer.html?mode=light#api

Dynamically change the viewer's theme to light mode by calling the 'setTheme' method with the 'light' argument.

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

--------------------------------

### Create Viewer with Text Watermark

Source: https://jitword.com/jit-viewer.html?mode=light#api

Configure a viewer with text-based watermarks. Ensure the 'type' is set to 'text' and provide content, styling, and positioning for the watermark.

```javascript
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'
  }
})
```

--------------------------------

### Supported File Formats

Source: https://jitword.com/jit-viewer.html?mode=light#api

List of file formats supported by JitViewer.

```APIDOC
## Supported File Formats

JitViewer supports a wide range of document and media formats:

- **Documents**: PDF (.pdf), DOCX (.docx), XLSX (.xlsx, .xls), CSV (.csv), PPTX (.pptx, .ppt), OFD (.ofd), MD (.md, .markdown), TXT (.txt), HTML (.html, .htm)
- **Images**: PNG (.png), JPG (.jpg, .jpeg), GIF (.gif), and more.
- **Video**: MP4 (.mp4), MOV (.mov), WEBM (.webm)
- **Audio**: MP3 (.mp3), WAV (.wav), OGG (.ogg)
- **Code**: JS (.js), CSS (.css), JSON (.json), and other text-based code files.
- **CAD**: DXF (.dxf)
```

--------------------------------

### Switch to Dark Theme

Source: https://jitword.com/jit-viewer.html?mode=light#api

Dynamically change the viewer's theme to dark mode by calling the 'setTheme' method with the 'dark' argument.

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

--------------------------------

### Dynamic Theme Switching

Source: https://jitword.com/jit-viewer.html

Switch between light and dark themes dynamically using the 'setTheme' method. Call 'setTheme(\'dark\')' for dark mode and 'setTheme(\'light\')' for light mode.

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

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