Dynamsoft Document Viewer

https://www.dynamsoft.com/document-viewer/docs
Admin
Dynamsoft Document Viewer is a browser-based JavaScript SDK designed for viewing and editing images...
Tokens:134,938
Snippets:2,078
Trust Score:9.8
Update:2 months ago
Show doc for...
Tokens:
Raw
### Run the application

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/angular.html

Start the development server.

```bash
ng serve
```

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

### Install SDK via Package Manager

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/add_dependency.html

Install the package locally using yarn or npm.

```bash
yarn add dynamsoft-document-viewer@latest
```

```bash
npm install dynamsoft-document-viewer@latest
```

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

### Install Dependencies

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/react.html

Install the Dynamsoft Document Viewer package and the rollup-plugin-copy utility for resource management.

```bash
npm install dynamsoft-document-viewer
```

```bash
npm install rollup-plugin-copy --save-dev
```

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

### Get Annotation Options

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/strikeout.html

Syntax and usage example for retrieving current strikeout annotation settings.

```typescript
getOptions(): StrikeoutAnnotationOptions;__
```

```javascript
// Given that editViewer is an existing instance of EditViewer and a document is currently open.
const pageUid = editViewer.indexToUid(0);
const options = {
    rects: [{
        x: 10,
        y: 10,
        width: 100,
        height: 100,
    }],
    borderColor: "red",
}
const strikeout = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "strikeout", options); // Create a strikeout annotation instance.
const strikeoutOptions = strikeout.getOptions();__
```

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

### Set Text Content

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/textcontent.html

Example of setting the text content string.

```javascript
content: "Dynamsoft Document Viewer",
```

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

### Complete HelloWorld Implementation

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/helloworld.html

The full integrated code example combining HTML, CSS, and SDK initialization.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>DDV - HelloWorld</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.css">
    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.js"></script>
</head>
<style>
    html,body {
        width: 100%;
        height: 100%;
        margin:0;
        padding:0;
        overscroll-behavior-y: none;
        overflow: hidden;
    }

    #container {
        width: 100%;
        height: 100%;
    }
</style>
<body>
    <div id="container"></div>
</body>
<script type="module">
    (async () => {
        // Public trial license which is valid for 24 hours
        // You can request a 30-day trial key from https://www.dynamsoft.com/customer/license/trialLicense/?product=ddv
        Dynamsoft.DDV.Core.license = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9";
        Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine";
        // Preload DDV Resource
        Dynamsoft.DDV.Core.loadWasm();
        await Dynamsoft.DDV.Core.init();
        const editViewer = new Dynamsoft.DDV.EditViewer({
            container: "container",
            uiConfig: Dynamsoft.DDV.getDefaultUiConfig("editViewer"),
        });
    })();
</script>
</html>__
```

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

### Set Background Color

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/ellipseannotationoptions.html

Example of setting the background color property.

```javascript
background: "rgb(255,255,255)",
```

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

### Set Border Color

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/redactionannotationoptions.html

Example of setting the border color property.

```javascript
borderColor: "rgb(255,0,0)",
```

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

### Set Font Weight

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/textcontent.html

Example of setting the font weight to bold.

```javascript
fontWeight: "bold",
```

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

### Play camera video stream

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/captureviewer.html

Initializes the viewer and starts the video stream with optional configuration.

```javascript
const captureViewer = new Dynamsoft.DDV.CaptureViewer({
    container: document.getElementById("viewer"),
});
await captureViewer.play({
     resolution: [1080, 720],
     fill: true,
});__
```

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

### Complete Document Detection Implementation

Source: https://www.dynamsoft.com/document-viewer/docs/features/advanced/documentdetect.html

A full HTML example demonstrating the initialization of DDV, the creation of a custom DocumentDetect class, and the integration with the CaptureVisionRouter for boundary detection.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Detect</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.css">
</head>
<style>
    html,body {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }
    #viewer{
        width: 1280px;
        height: 860px;
        margin: 10px;
    }
</style>
<body>
    <div id="viewer"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/license.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-normalizer@2.0.20/dist/ddn.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.30/dist/cvr.js"></script>
<script type="module">
    (async () => {
        // Initializes DDV
        Dynamsoft.DDV.Core.license = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"; // Public trial license which is valid for 24 hours
        Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine";
        await Dynamsoft.DDV.Core.init();

        // Initializes the DDN license using a license key string.
        Dynamsoft.License.LicenseManager.initLicense("**********");

        Dynamsoft.Core.CoreModule.loadWasm(["DDN"]);
        // Initializes the router variable by creating an instance of the CaptureVisionRouter class.
        const router = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();

        // Inherit DocumentDetect class
        class MyDocumentDetect extends Dynamsoft.DDV.DocumentDetect {
            // Rewrite the detect method
            async detect(image, detectConfig) {
                if (!router) {
                    return Promise.resolve({
                        success: false,
                    });
                }

                // Use DDN document boundaries detection algorithm
                const DSImageData = {
                    bytes: new Uint8Array(image.data.slice(0)),
                    width: image.width,
                    height: image.height,
                    stride: image.width * 4,
                    format: 10,
                };

                const results = await router.capture(DSImageData, "detect-document-boundaries");

                // Filter DDN detection results
                if (results.items.length <= 0) {
                    return Promise.resolve({
                        success: false,
                    });
                }

                // Use processDetectResult to obtain the comprehensive detection result DocumentDetectResult
                //by passing in the detected points and other parameters (including confidence, status, etc.).
                const quad = [];
                results.items[0].location.points.forEach(p => {
                    quad.push([p.x, p.y]);
                });

                const ret = this.processDetectResult({
                        location: quad,
                        width: image.width,
                        height: image.height,
                        config: detectConfig,
                });

                // Return detection result
                return Promise.resolve(ret);
            }
        }

        const detectHandler = new MyDocumentDetect();

        Dynamsoft.DDV.setProcessingHandler("documentBoundariesDetect", detectHandler);

        // Enable auto detect and auto capture when initializing capture viewer
        const captureViewerConfig = {
            enableAutoCapture: true,
            enableAutoDetect: true,
            maxFrameNumber: 10,
        };
        // Create the capture viewer
        const captureViewer = new Dynamsoft.DDV.CaptureViewer({
            container: "viewer",
            viewerConfig: captureViewerConfig,
        });
        captureViewer.play();

    })();
</script>
</html>
```

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

### Reference Locally Hosted SDK

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/add_dependency.html

Include the SDK files after downloading or installing via package manager.

```html
<!-- Upon extracting the zip package into your project, you can generally include it in the following manner -->
<script src="./Your-Folder/dist/ddv.js"></script>
<link rel="stylesheet" href="./Your-Folder/dist/ddv.css">__
```

```html
<script src="./node_modules/dynamsoft-document-viewer/dist/ddv.js"></script>
<link rel="stylesheet" href="./node_modules/dynamsoft-document-viewer/dist/ddv.css">__
```

```javascript
import { DDV } from 'dynamsoft-document-viewer';
import "dynamsoft-document-viewer/dist/ddv.css";__
```

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

### Install Dynamsoft Document Viewer dependency

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/angular.html

Add the library to the project via npm.

```bash
npm install dynamsoft-document-viewer
```

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

### Create New Annotations Example

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/annotationmanager.html

Demonstrates how to instantiate various annotation types using an existing EditViewer instance.

```javascript
// Given that editViewer is an existing instance of EditViewer and a document is currently open.
const pageUid = editViewer.indexToUid(0);

const rect = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "rectangle");
const ellipse = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "ellipse");
const polygon = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "polygon");
const polyline = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "polyline");
const line = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "line");
const ink = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "ink");
const textBox = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "textBox");
const textTypewriter = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "textTypewriter");
const highlight = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "highlight");
const underline = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "underline");
const strikeout = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "strikeout");
const redaction = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "redaction");
const stamp = await Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "stamp");__
```

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

### Set Font Size

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/textcontent.html

Example of setting the font size as a numeric value.

```javascript
fontSize: 20,
```

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

### Annotation Property Syntax Examples

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/ellipse.html

Syntax definitions for various read-only properties and configuration types.

```typescript
readonly uid: string;
```

```typescript
readonly pageUid: string;
```

```typescript
"rectangle" | "redaction" | "ellipse" | "line" | "polygon" | "polyline" | "ink" | "textBox" | "textTypewriter" | "stamp" | "highlight" | "underline" | "strikeout" | "incomplete" | "unknown"
```

```typescript
readonly creationDate: string;
```

```typescript
flattened: boolean;   //Default value is `false`.
```

```typescript
readonly modificationDate: string;
```

```typescript
getOptions(): EllipseAnnotationOptions;
```

```typescript
updateOptions(ellipseAnnotationOptions: EllipseAnnotationOptions): boolean;
```

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

### Palette colorList Configuration

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/paletteconfig.html

Example of defining a custom color list using various color formats.

```javascript
colorList: ["red", "green", "#0000ff", "#ffff00" , "rgb(0, 0, 0)", "rgb(128, 128, 128)", "hsl(0, 0%, 100%)", "hsl(350, 100%, 88%)"],
```

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

### Setting Background Color

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/highlightannotationoptions.html

Example of setting the background property for a highlight annotation.

```javascript
background: "#FF0000",
```

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

### Set Text Color

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/textcontent.html

Example of setting the text color using a HEX value.

```javascript
color: "#000000",
```

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

### Initialize React Project

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/react.html

Create a new React project using Vite.

```bash
npm create vite@latest ddv-react -- --template react
```

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

### Initialize SDK with License and Engine Path

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/sdk_init.html

Configures the license and engine resource path for the SDK. Use the CDN path for remote hosting or a local path if hosting the SDK files yourself.

```javascript
Dynamsoft.DDV.Core.license = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"; // Public trial license which is valid for 24 hours
Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine";// Lead to a folder containing the distributed WASM files
await Dynamsoft.DDV.Core.loadWasm();
await Dynamsoft.DDV.Core.init();__
```

```javascript
Dynamsoft.DDV.Core.license = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"; // Public trial license which is valid for 24 hours
Dynamsoft.DDV.Core.engineResourcePath = "./node_modules/dynamsoft-document-viewer/dist/engine";// Lead to a folder containing the distributed WASM files
await Dynamsoft.DDV.Core.loadWasm();
await Dynamsoft.DDV.Core.init();__
```

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

### Initialize SDK

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/helloworld.html

Configuration and initialization steps for the DDV core engine.

```javascript
// Public trial license which is valid for 24 hours
// You can request a 30-day trial key from https://www.dynamsoft.com/customer/license/trialLicense/?product=ddv
Dynamsoft.DDV.Core.license = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9";
Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine";
// Preload DDV Resource
Dynamsoft.DDV.Core.loadWasm();
await Dynamsoft.DDV.Core.init();__
```

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

### get defaultFilterType()

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/iimagefilter.html

Retrieves the default image filter type.

```APIDOC
## get defaultFilterType()

### Description
Retrieves the default image filter type.

### Syntax
`get defaultFilterType(): EnumImageFilterType;`

### Return Value
Returns an `EnumImageFilterType` value.
```

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

### toolMode

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/editviewer.html

Gets or sets the current tool mode of the viewer.

```APIDOC
## toolMode

### Description
Specify or return the tool mode of the viewer.

### Syntax
`toolMode: ToolMode;`

### ToolMode Types
`"pan" | "crop" | "annotation" | "textSelection" | "redaction"`

### Example
`editViewer.toolMode = "crop";`
```

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

### Initialize the SDK

Source: https://www.dynamsoft.com/document-viewer/docs/api/namespace/ddv_core.html

Initializes the DDV instance after setting the license and resource path.

```javascript
// Public trial license which is valid for 24 hours
// You can request a 30-day trial key from https://www.dynamsoft.com/customer/license/trialLicense/?product=ddv
Dynamsoft.DDV.Core.license = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9";
Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine";
Dynamsoft.DDV.Core.loadWasm();
await Dynamsoft.DDV.Core.init();__
```

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

### Get Selected Annotations

Source: https://www.dynamsoft.com/document-viewer/docs/features/viewers/editviewer.html

Retrieve the list of currently selected annotations.

```javascript
const annotations = editViewer.getSelectedAnnotations();__
```

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

### Initialize Custom Viewer

Source: https://www.dynamsoft.com/document-viewer/docs/features/viewers/others.html

Create a blank viewer instance for custom UI implementation.

```javascript
const customViewer = new Dynamsoft.DDV.CustomViewer({
    container: document.getElementById("viewer"),
});__
```

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

### Get quadrilateral selection

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/perspectiveviewer.html

Retrieves the current quadrilateral selection from the viewer.

```javascript
const quad = perspectiveViewer.getQuadSelection();
```

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

### Dynamsoft.DDV.Core.init()

Source: https://www.dynamsoft.com/document-viewer/docs/api/namespace/ddv_core.html

Initializes the Dynamsoft Document Viewer SDK.

```APIDOC
## Method: init()

### Description
Initializes the DDV SDK. This should be called after setting the license and engine resource path, and after `loadWasm()` has completed.

### Syntax
`init(): Promise<ConfigResult>;`
```

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

### Get available cameras

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/captureviewer.html

Retrieves a list of all available video devices.

```javascript
const cameras = await captureViewer.getAllCameras();__
```

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

### Get CaptureViewer Style

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/captureviewer.html

Retrieves the style object for the specified component.

```typescript
getStyle(captureViewerStyleName: CaptureViewerStyleName): CaptureViewerStyle | null;__
```

```typescript
type CaptureViewerStyleName = "canvasStyle" | "quadSelectionStyle";__
```

```javascript
// Get canvasStyle object;
const canvasStyle = captureViewer.getStyle("canvasStyle");__
```

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

### Create a document

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/documentmanager.html

Initializes a new empty document with optional metadata.

```javascript
const firstDoc = Dynamsoft.DDV.documentManager.createDocument({
    name: "first_document",
    author: "DDV",
    creationDate: "D:20230101085959-08'00'",
    });__
```

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

### Set Font Style

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/textcontent.html

Example of setting the font style to italic.

```javascript
fontStyle: "italic",
```

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

### Create a new Angular project

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/angular.html

Initialize a new project using the Angular CLI.

```bash
ng new ddv-angular
```

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

### Set Font Family

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/textcontent.html

Example of setting the font family for the text.

```javascript
fontFamily: "Times",
```

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

### new Dynamsoft.DDV.PerspectiveViewer(options)

Source: https://www.dynamsoft.com/document-viewer/docs/features/viewers/perspectiveviewer.html

Initializes a new instance of the PerspectiveViewer.

```APIDOC
## new Dynamsoft.DDV.PerspectiveViewer(options)

### Description
Initializes a new instance of the PerspectiveViewer within a specified container.

### Parameters
- **options** (object) - Required - Configuration object containing the container element.
```

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

### Create a BrowseViewer Instance

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/browseviewer.html

Initialize a new BrowseViewer instance by providing the container element.

```javascript
const browseViewer = new Dynamsoft.DDV.BrowseViewer({
    container: document.getElementById("viewer"),
});__
```

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

### Control Video Stream

Source: https://www.dynamsoft.com/document-viewer/docs/features/viewers/captureviewer.html

Commands to start and stop the camera video stream.

```javascript
await captureViewer.play();
```

```javascript
captureViewer.stop();
```

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

### Get page data

Source: https://www.dynamsoft.com/document-viewer/docs/features/datamanagement/pagemanagement.html

Retrieve PageData for a specific page using getPageData.

```javascript
const pageData = await firstDoc.getPageData(firstDoc.pages[0]);
```

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

### Initialize DDN

Source: https://www.dynamsoft.com/document-viewer/docs/features/advanced/documentdetect.html

Initialize the license, preload the DocumentNormalizer module, and create a CaptureVisionRouter instance.

```javascript
// Initializes the DDN license using a license key string.
Dynamsoft.License.LicenseManager.initLicense("**********");
// Preloads the DocumentNormalizer module, saving time in preparing for document border detection.
Dynamsoft.Core.CoreModule.loadWasm(["DDN"]);
// Initializes the router variable by creating an instance of the CaptureVisionRouter class.
const router = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();__
```

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

### Get Text Selection

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/editviewer.html

Retrieves detailed information about the currently selected text.

```typescript
getTextSelection(): ITextSelectedInfo[];__
```

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

### Initialize EditViewer with custom configuration

Source: https://www.dynamsoft.com/document-viewer/docs/ui/customize/layout.html

Apply the custom UI configuration when instantiating the EditViewer.

```javascript
const editViewer = new Dynamsoft.DDV.EditViewer({
    container: "viewer",
    uiConfig: newUiConfig,
});__
```

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

### Get selected annotations

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/editviewer.html

Retrieves an array of currently selected annotation objects.

```typescript
getSelectedAnnotations(): Annotation[];__
```

```javascript
const selectAnnots = editViewer.getSelectAnnotations();__
```

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

### Generate viewer component

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/angular.html

Create a new component to host the document viewer.

```bash
ng generate component viewer
```

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

### Get the current document

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/perspectiveviewer.html

Retrieves the object representing the currently open document.

```javascript
const currentDoc = perspectiveViewer.currentDocument;__
```

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

### Get EditViewer style

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/editviewer.html

Retrieves the style object for a specific component of the EditViewer.

```javascript
// Get pageStyle object;
const pageStyle = editViewer.getStyle("pageStyle");__
```

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

### Include SDK via CDN

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/add_dependency.html

Use jsDelivr or UNPKG to load the SDK directly from a CDN.

```html
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.css">__
```

```html
<script src="https://unpkg.com/dynamsoft-document-viewer@latest/dist/ddv.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dynamsoft-document-viewer@latest/dist/ddv.css">__
```

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

### Get a style object

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/perspectiveviewer.html

Retrieves the style configuration for a specific viewer component.

```javascript
// Get pageStyle object;
const pageStyle = perspectiveViewer.getStyle("pageStyle");__
```

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

### Create and Load Document

Source: https://www.dynamsoft.com/document-viewer/docs/features/datamanagement/pagemanagement.html

Initializes a new document and loads an image blob into it.

```javascript
// Create a document
const docManager = Dynamsoft.DDV.documentManager;
const firstDoc = docManager.createDocument({
    name: "first_document",
    author: "DDV",
    creationDate: "D:20230101085959-08'00'",
});

//Load a file
var blob = /*Sample image blob*/;
await firstDoc.loadSource(blob);__
```

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

### Create a new Vue project

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/vue.html

Initialize a new Vue project using Vite with TypeScript template.

```bash
npm create vite@latest ddv-vue -- --template vue-ts
```

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

### Get current camera information

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/captureviewer.html

Retrieves details about the currently selected camera.

```javascript
const currentCamera = captureViewer.getCurrentCamera();
console.log("Current camera is "currentCamera.label);__
```

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

### Get Annotation Options

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/underline.html

Retrieves the current configuration options for an underline annotation.

```typescript
getOptions(): UnderlineAnnotationOptions;__
```

```javascript
// Given that editViewer is an existing instance of EditViewer and a document is currently open.
const pageUid = editViewer.indexToUid(0);
const options = {
    rects: [{
        x: 10,
        y: 10,
        width: 100,
        height: 100,
    }],
    borderColor: "red"
}
const underline = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "underline", options); // Create an underline annotation instance.
const underlineOptions = underline.getOptions();__
```

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

### Initialize Browse Viewer

Source: https://www.dynamsoft.com/document-viewer/docs/features/viewers/others.html

Instantiate the Browse Viewer within a container and open a document by its UID.

```javascript
const browseViewer = new Dynamsoft.DDV.BrowseViewer({
    container: document.getElementById("viewer"),
});

browseViewer.openDocument("docUid"); // Open a document which has pages__
```

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

### show(): void

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/customviewer.html

Displays the viewer.

```APIDOC
## show(): void

### Description
Shows the viewer. The viewer is shown automatically upon creation.
```

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

### Get Annotation Options

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/texttypewriter.html

Retrieves the current configuration options for the typewriter annotation.

```javascript
getOptions(): TextTypewriterAnnotationOptions;__
```

```javascript
// Given that editViewer is an existing instance of EditViewer and a document is currently open.
const pageUid = editViewer.indexToUid(0);
const textTypewriter = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "textTypewriter"); // Create a default TextTypewriter annotation instance.
const textTypewriterOptions = textTypewriter.getOptions();__
```

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

### Get Stamp Options

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/stamp.html

Retrieve the current configuration options for a stamp annotation.

```typescript
getOptions(): StampAnnotationOptions;__
```

```typescript
// Given that editViewer is an existing instance of EditViewer and a document is currently open.
const pageUid = editViewer.indexToUid(0);
const stamp = await Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "stamp"); // Create a default Stamp annotation instance.
const stampOptions = stamp.getOptions();__
```

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

### Create a PerspectiveViewer instance

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/perspectiveviewer.html

Initializes a new viewer instance by providing a container element.

```javascript
const perspectiveViewer = new Dynamsoft.DDV.PerspectiveViewer({
    container: document.getElementById("viewer"),
});__
```

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

### Get Redaction Options

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/redaction.html

Retrieves the current configuration options for a redaction annotation.

```typescript
getOptions(): RedactionAnnotationOptions;__
```

```javascript
// Given that editViewer is an existing instance of EditViewer and a document is currently open.
const pageUid = editViewer.indexToUid(0);
const redaction = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "redaction"); // Create a default Redaction annotation instance.
const options = redaction.getOptions();__
```

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

### Create a new document

Source: https://www.dynamsoft.com/document-viewer/docs/features/datamanagement/docmanagement.html

Use createDocument to initialize a new document with optional metadata like name, author, and creation date.

```javascript
const docManager = Dynamsoft.DDV.documentManager;

// Specify the name, author and creationDate
const firstDoc = docManager.createDocument({
    name: "first_document",
    author: "DDV",
    creationDate: "D:20230101085959-08'00'",
    });

// Document's name and creationDate will be generated automatically, and author will be blank, if they are not specified
const secondDoc = docManager.createDocument();
__
```

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

### Get Annotation Options

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/highlight.html

Retrieves the current configuration options for a highlight annotation.

```typescript
getOptions(): HighlightAnnotationOptions;__
```

```typescript
// Given that editViewer is an existing instance of EditViewer and a document is currently open.
const pageUid = editViewer.indexToUid(0);
const options = {
    rects: [{
        x: 10,
        y: 10,
        width: 100,
        height: 100,
    }],
    background: "red"
}
const highlight = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "highlight", options); // Create a highlight annotation instance.
const highlightOptions = highlight.getOptions();__
```

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

### Initialize SDK with Device Friendly Name

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/sdk_init.html

Sets a human-readable name for the device during initialization to assist in identifying devices in statistics tables.

```javascript
Dynamsoft.DDV.Core.license = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9";// Public trial license which is valid for 24 hours
Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine"; // Lead to a folder containing the distributed WASM files
Dynamsoft.DDV.Core.deviceFriendlyName = "Dynamsoft-iPhone"; // A string representing the device which is easier to recognize than its UUID
await Dynamsoft.DDV.Core.loadWasm();
await Dynamsoft.DDV.Core.init();__
```

```javascript
Dynamsoft.DDV.Core.license = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9";// Public trial license which is valid for 24 hours
Dynamsoft.DDV.Core.engineResourcePath = "./node_modules/dynamsoft-document-viewer/dist/engine"; // Lead to a folder containing the distributed WASM files
Dynamsoft.DDV.Core.deviceFriendlyName = "Dynamsoft-iPhone"; // A string representing the device which is easier to recognize than its UUID
await Dynamsoft.DDV.Core.loadWasm();
await Dynamsoft.DDV.Core.init();__
```

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

### Initialize Perspective Viewer

Source: https://www.dynamsoft.com/document-viewer/docs/features/viewers/perspectiveviewer.html

Instantiate the Perspective Viewer and open a document using its unique identifier.

```javascript
const perspectiveViewer = new Dynamsoft.DDV.PerspectiveViewer({
    container: document.getElementById("viewer"),
});

perspectiveViewer.openDocument("docUid"); // Open a document which has pages__
```

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

### Get Tooltip Object

Source: https://www.dynamsoft.com/document-viewer/docs/api/namespace/ddv_elements.html

Retrieves the current tooltip configuration object for built-in elements.

```javascript
const mytooltips = Dynamsoft.DDV.Elements.getTooltip();__
```

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

### BrowseViewer()

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/browseviewer.html

Constructor for creating a new BrowseViewer instance.

```APIDOC
## BrowseViewer()

### Description
Default constructor of a BrowseViewer instance.

### Syntax
`new Dynamsoft.DDV.BrowseViewer(options?: BrowseViewerConstructorOptions);`

### Parameters
- **options** (BrowseViewerConstructorOptions) - Optional - The constructor options for a BrowseViewer instance.
```

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

### Get Page Custom Data

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/idocument/index.html

Retrieves custom metadata previously assigned to a page.

```javascript
const customdata = await firstDoc.getPageCutomData(firstDoc.pages[0]);__
```

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

### Get Default Filter Type

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/iimagefilter.html

Retrieves the default filter type used by the interface.

```typescript
get defaultFilterType(): EnumImageFilterType;__
```

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

### Get UI Configuration

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/ibrowseviewer.html

Retrieve the current UI configuration object for the thumbnail viewer.

```javascript
const viewerUi = thumbnailObj.getUiConfig();__
```

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

### Initialize Edit Viewer

Source: https://www.dynamsoft.com/document-viewer/docs/features/viewers/editviewer.html

Create an instance of the EditViewer and open a document by its UID.

```javascript
const editViewer = new Dynamsoft.DDV.EditViewer({
    container: document.getElementById("viewer"),
});
editViewer.openDocument("docUid"); // Open a document which has pages__
```

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

### Initialize CustomViewer Instance

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/customviewer.html

Instantiates a new CustomViewer by providing a container element.

```javascript
const customViewer = new Dynamsoft.DDV.CustomViewer({
    container: document.getElementById("viewer"),
});
```

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

### cropMode: CropMode

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/editviewer.html

Gets or sets the current mode for cropping (current image or all images).

```APIDOC
## cropMode

### Description
Property to get or set the cropping mode. Valid values are "current" or "all".
```

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

### Implement viewer component logic

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/angular.html

Initialize the EditViewer and configure the license and engine path.

```typescript
import { Component } from '@angular/core';
import { DDV } from 'dynamsoft-document-viewer';

@Component({
  selector: 'app-viewer',
  standalone: true,
  imports: [],
  templateUrl: './viewer.component.html',
  styleUrl: './viewer.component.css'
})

export class ViewerComponent {
  async ngOnInit() {
    DDV.on('error', (e) => {
      alert(e.message)
    })

    // Public trial license which is valid for 24 hours
    DDV.Core.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
    DDV.Core.engineResourcePath = '/dynamsoft-document-viewer/dist/engine';
    DDV.Core.loadWasm();
    await DDV.Core.init();

    const viewer = new DDV.EditViewer({
      container: 'container'
    });
  }
}
```

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

### annotationMode

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/editviewer.html

Gets or sets the specific annotation mode when the tool mode is set to annotation.

```APIDOC
## annotationMode

### Description
Specify or return the annotation mode of the viewer.

### Syntax
`annotationMode: AnnotationMode;`

### AnnotationMode Types
`"select" | "erase" | "rectangle" | "ellipse" | "line" | "polygon" | "polyline" | "ink" | "textBox" | "textTypewriter" | "stamp" | "highlight" | "strikeout" | "underline"`

### Example
`editViewer.toolMode = "annotation";`
`editViewer.annotationMode = "select";`
```

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

### Get Current Page UID

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/browseviewer.html

Retrieves the unique identifier of the currently displayed page.

```javascript
const curPageUid = browseViewer.getCurrentPageUid();__
```

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

### Get Current Page Index

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/browseviewer.html

Retrieves the zero-based index of the currently displayed page.

```javascript
const currentIndex = browseViewer.getCurrentPageIndex();__
```

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

### Define Application Styles

Source: https://www.dynamsoft.com/document-viewer/docs/gettingstarted/react.html

Configure global styles in App.css to ensure the viewer occupies the available space.

```css
html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px 8px 8px 8px;
  box-sizing: border-box;
}

#root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
```

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

### Get Page Count

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/browseviewer.html

Returns the total number of pages in the currently opened document.

```javascript
const pageCount = browseViewer.getPageCount();__
```

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

### Initialize IBrowseViewer

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/ibrowseviewer.html

An IBrowseViewer instance is created automatically when an EditViewer is initialized.

```javascript
const editViewer = new Dynamsoft.DDV.EditViewer({
    container: document.getElementById("viewer"),
});

// An IBrowseViewer object will be created at meanwhile which represents the thumbnail object in edit viewer.
const thumbnailObj = editViewer.thumbnail;__
```

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

### Get Annotations by Page Syntax

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/annotationmanager.html

Retrieves all annotations associated with a specific page UID.

```typescript
getAnnotationsByPage(pageUid: string): Annotation[];__
```

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

### Dynamsoft.DDV.Core.loadWasm()

Source: https://www.dynamsoft.com/document-viewer/docs/api/namespace/ddv_core.html

Loads the necessary WASM modules before SDK initialization.

```APIDOC
## Method: loadWasm()

### Description
Loads the WASM modules. This must be called before the `init()` method.

### Syntax
`loadWasm(): Promise<void>;`
```

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

### Get Polyline Options

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/polyline.html

Retrieves the current configuration options for a polyline annotation instance.

```javascript
// Given that editViewer is an existing instance of EditViewer and a document is currently open.
const pageUid = editViewer.indexToUid(0);
const polyline = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "polyline"); // Create a default Polyline annotation instance.
const polylineOptions = polyline.getOptions();__
```

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

### Get Rectangle Annotation Options

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/rectangle.html

Retrieve the current configuration options for a rectangle annotation.

```typescript
getOptions(): RectAnnotationOptions;__
```

```javascript
// Given that editViewer is an existing instance of EditViewer and a document is currently open.
const pageUid = editViewer.indexToUid(0);
const rect = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "rectangle"); // Create a default Rectangle annotation instance.
const rectOptions = rect.getOptions();__
```

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

### createDocument()

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/documentmanager.html

Creates an empty document instance.

```APIDOC
## createDocument()

### Description
Creates an empty document.

### Syntax
`createDocument(createDocumentOptions?: CreateDocumentOptions): IDocument;`

### Parameters
- **createDocumentOptions** (CreateDocumentOptions) - Optional - The configuration used to create a document.

### Return Value
- **IDocument** - The object of the created document.

### Code Example
```javascript
const firstDoc = Dynamsoft.DDV.documentManager.createDocument({
    name: "first_document",
    author: "DDV",
    creationDate: "D:20230101085959-08'00'",
});
```
```

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

### BrowseViewerConstructorOptions

Source: https://www.dynamsoft.com/document-viewer/docs/api/interface/browseviewerconstructoroptions.html

Interface definition for configuring the BrowseViewer instance during initialization.

```APIDOC
## BrowseViewerConstructorOptions

### Description
Configuration object used to initialize the BrowseViewer. Defines the container, keyboard shortcuts, viewer behavior, UI layout, and grouping.

### Attributes
- **container** (string | HTMLElement) - Optional - The container element or its ID used to display the viewer.
- **keyboardInteractionConfig** (KeyboardInteractionConfig) - Optional - Configuration for keyboard shortcuts. Disabled by default.
- **viewerConfig** (BrowseViewerConfig) - Optional - Specific configurations for the viewer behavior.
- **uiConfig** (UiConfig) - Optional - UI layout configurations for the viewer.
- **groupUid** (string) - Optional - The unique identifier for the viewer group. A random UID is generated if not provided.
```

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

### Get Ink Annotation Options

Source: https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/ink.html

Retrieves the current options for an ink annotation instance.

```typescript
getOptions(): InkAnnotationOptions;__
```

```javascript
// Given that editViewer is an existing instance of EditViewer and a document is currently open.
const pageUid = editViewer.indexToUid(0);
const ink = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "ink"); // Create a default Ink annotation instance.
const inkOptions = ink.getOptions();__
```
Tokens:
Raw