From 70331709801c0b8b2ad5ef0ca2635f1bea2fbd82 Mon Sep 17 00:00:00 2001 From: DMGithubPublisher Date: Wed, 16 Jul 2025 17:01:27 +0800 Subject: [PATCH] update to internal commit d87d1742 --- _includes/sidelist-gettingstarted.html | 8 +- _v1.1/features/advanced/documentdetect.md | 2 - api/namespace/ddv_core.md | 22 ++- assets/imgs/download.png | Bin 0 -> 4893 bytes gettingstarted/angular.md | 170 +++++++++++++++++++++ gettingstarted/learnmore/mwc.md | 0 gettingstarted/react.md | 171 ++++++++++++++++++++++ gettingstarted/vue.md | 160 ++++++++++++++++++++ index.md | 4 + 9 files changed, 531 insertions(+), 6 deletions(-) create mode 100644 assets/imgs/download.png create mode 100644 gettingstarted/angular.md delete mode 100644 gettingstarted/learnmore/mwc.md create mode 100644 gettingstarted/react.md create mode 100644 gettingstarted/vue.md diff --git a/_includes/sidelist-gettingstarted.html b/_includes/sidelist-gettingstarted.html index cf89d9f..cf095c7 100644 --- a/_includes/sidelist-gettingstarted.html +++ b/_includes/sidelist-gettingstarted.html @@ -4,10 +4,12 @@
  • Adding the dependency
  • SDK Initialization
  • Creating HelloWorld
    • - {% comment %}
  • Learn More +
  • Libraries and Frameworks -
    • {% endcomment %} + \ No newline at end of file diff --git a/_v1.1/features/advanced/documentdetect.md b/_v1.1/features/advanced/documentdetect.md index b067847..0b32768 100644 --- a/_v1.1/features/advanced/documentdetect.md +++ b/_v1.1/features/advanced/documentdetect.md @@ -228,8 +228,6 @@ Dynamsoft.DDV.setProcessingHandler("documentBoundariesDetect", detectHandler); ``` -![Docuemnt Detect](/assets/imgs/documentdetect.GIF) - ## Reference - [`DocumentDetect class`]({{ site.api }}class/advanced/documentdetect.html) \ No newline at end of file diff --git a/api/namespace/ddv_core.md b/api/namespace/ddv_core.md index cc2e077..aaada82 100644 --- a/api/namespace/ddv_core.md +++ b/api/namespace/ddv_core.md @@ -18,7 +18,8 @@ permalink: /api/namespace/ddv_core.html | API Name | Description | | -------------------- | ------------------------------------------------------------ | -| [`license` ](#engineresourcepath) | Specify the license string. | +| [`versionInfo` ](#versioninfo) | Get the version info of the SDK. | +| [`license` ](#license) | Specify the license string. | | [`engineResourcePath`](#engineresourcepath) | Specify the path should lead to a folder containing the distributed WASM files. | | [`deviceFriendlyName`](#devicefriendlyname) | Specify a human-readable name for the device which corresponds to its UUID. | @@ -31,6 +32,25 @@ permalink: /api/namespace/ddv_core.html ## Properties +### versionInfo + +Get the version info of the SDK. + +**Syntax** + +```typescript +versionInfo: DDVVersionInfo; +``` + +It will return an object like the following example: + +``` +{ + viewer: '3.0.0', + engine: '3.0.0' +} +``` + ### license Specify the license string. diff --git a/assets/imgs/download.png b/assets/imgs/download.png new file mode 100644 index 0000000000000000000000000000000000000000..72427c7504a34385d2056313724b07bc6e2a1161 GIT binary patch literal 4893 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 literal 0 HcmV?d00001 diff --git a/gettingstarted/angular.md b/gettingstarted/angular.md new file mode 100644 index 0000000..68bdc72 --- /dev/null +++ b/gettingstarted/angular.md @@ -0,0 +1,170 @@ +--- +layout: default-layout +needAutoGenerateSidebar: true +needGenerateH3Content: true +noTitleIndex: true +title: Angular Document Viewer - Dynamsoft Document Viewer Documentation +keywords: Documentation, Dynamsoft Document Viewer, PDF, Getting Started, Angular +breadcrumbText: Angular +description: Learn how to integrate Dynamsoft Document Viewer into your Angular project with this step-by-step guide. +--- + +# How to Integrate Document Viewer into an Angular Project + +This guide will show you how to integrate Dynamsoft Document Viewer into an Angular project. + +You can can download the sample on GitHub: + +![Download](/assets/imgs/download.png)[Angular Helloworld](https://github.com/Dynamsoft/document-viewer-samples/blob/main/hello-world/angular) + +## Preparation + +Make sure you have node and Angular CLI (v17 in this guide) installed. + +## New Project + +Create a new Angular project. + +```bash +ng new ddv-angular +``` + +## Add Dependencies + +1. Install Dynamsoft Document Viewer. + + ```bash + npm install dynamsoft-document-viewer + ``` + +2. Modify `angular.json` to copy the resources of Dynamsoft Document Viewer and import its CSS. + + + ```json + { + "assets": [ + "src/favicon.ico", + "src/assets", + { + "glob": "**/*", + "input": "node_modules/dynamsoft-document-viewer/dist", + "output": "/dynamsoft-document-viewer/dist" + } + ], + "styles": [ + "src/styles.css", + "node_modules/dynamsoft-document-viewer/dist/ddv.css" + ] + } + ``` + +## Create a Document Viewer Component + +1. Generate a viewer component. + + ```bash + ng generate component viewer + ``` + +2. Add the following HTML code to `viewer.component.html`. + + ```html +
    + ``` + +3. Add the following CSS code to `viewer.component.css`. + + ```css + :host, #container { + width: 100%; + height: 100%; + } + ``` + +4. Add the following JavaScript code to `viewer.component.ts`. It will bind Edit Viewer to a container. A license is set here. You can apply for a 30-day trial on [this page](https://www.dynamsoft.com/customer/license/trialLicense/?product=ddv). + + ```ts + 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' + }); + } + } + ``` + +## Use the Document Viewer Component + + +1. Open `app.component.html` and add the viewer component. + + ```html + +

    Hello World for Angular

    + + + ``` + +2. Import the viewer component in `app.component.ts`. + + ```js + import { ViewerComponent } from './components/viewer/viewer.component'; + + @Component({ + selector: 'app-root', + standalone: true, + templateUrl: './app.component.html', + styleUrl: './app.component.css', + imports: [ + CommonModule, + RouterOutlet, + ViewerComponent, + ], + }) + ``` + +3. Add CSS in `app.component.css`. + + ```css + :host { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + } + ``` + +Run the app with the following command and you should see the viewer mounted in your application! + +```bash +ng serve +``` + +## Other Samples + +You can find other samples on [this GitHub repo](https://github.com/Dynamsoft/document-viewer-samples/). + + + diff --git a/gettingstarted/learnmore/mwc.md b/gettingstarted/learnmore/mwc.md deleted file mode 100644 index e69de29..0000000 diff --git a/gettingstarted/react.md b/gettingstarted/react.md new file mode 100644 index 0000000..8c8cc94 --- /dev/null +++ b/gettingstarted/react.md @@ -0,0 +1,171 @@ +--- +layout: default-layout +needAutoGenerateSidebar: true +needGenerateH3Content: true +noTitleIndex: true +title: React Document Viewer - Dynamsoft Document Viewer Documentation +keywords: Documentation, Dynamsoft Document Viewer, PDF, Getting Started, React +breadcrumbText: React +description: Learn how to integrate Dynamsoft Document Viewer into your React project with this step-by-step guide. +--- + +# How to Integrate Document Viewer into a React Project + +This guide will show you how to integrate Dynamsoft Document Viewer into a React project. + +You can can download the sample on GitHub: + +![Download](/assets/imgs/download.png)[React Helloworld](https://github.com/Dynamsoft/document-viewer-samples/blob/main/hello-world/react-vite) + +## Preparation + +Make sure you have node installed. + +## New Project + +Create a new React project. + +```bash +npm create vite@latest ddv-react -- --template react +``` + +## Add Dependencies + +1. Install Dynamsoft Document Viewer. + + ```bash + npm install dynamsoft-document-viewer + ``` + +2. Copy the resources of Dynamsoft Document Viewer into the public folder. + + + 1. Install `rollup-plugin-copy` as `devDependencies`. + + ```bash + npm install rollup-plugin-copy --save-dev + ``` + + + 2. Modify `vite.config.js` to copy the resources. + + ```js + import copy from "rollup-plugin-copy"; + export default defineConfig({ + plugins: [ + copy({ + targets: [ + { + src: "node_modules/dynamsoft-document-viewer/dist", + dest: "public/dynamsoft-document-viewer", + }, + ], + hook: "buildStart", + }), + react() + ], + }) + ``` + + +## Create a Document Viewer Component + +1. Create a viewer component file under `src\components\Viewer.jsx`. + +2. Add the following content in the component file. It will bind Edit Viewer to a container. A license is set here. You can apply for a 30-day trial on [this page](https://www.dynamsoft.com/customer/license/trialLicense/?product=ddv). + + ```jsx + import { useEffect } from 'react' + import { DDV } from 'dynamsoft-document-viewer' + import "dynamsoft-document-viewer/dist/ddv.css" + import "./Viewer.css" + export default function Viewer() { + const init = async () => { + 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"; + // Preload DDV Resource + DDV.Core.loadWasm(); + await DDV.Core.init(); + + const viewer = new DDV.EditViewer({ + container: 'container' + }); + } + + useEffect(() => { + init(); + },[]) + + return ( +
    + ) + } + ``` + + `Viewer.css`: + + ```css + #container { + width: 100%; + height: 100%; + } + ``` + +## Use the Document Viewer Component + +Open `App.jsx` and add the viewer component. + +```jsx +import './App.css' +import Viewer from './components/Viewer' + +function App() { + return ( + <> +

    Hello World for React + Vite

    + + + ) +} + +export default App +``` + +`App.css`: + +```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; +} +``` + +Run the app using the following command and you should see the viewer mounted in your application! + +```bash +npm run dev +``` + +## Other Samples + +You can find other samples on [this GitHub repo](https://github.com/Dynamsoft/document-viewer-samples/). + diff --git a/gettingstarted/vue.md b/gettingstarted/vue.md new file mode 100644 index 0000000..5ed1792 --- /dev/null +++ b/gettingstarted/vue.md @@ -0,0 +1,160 @@ +--- +layout: default-layout +needAutoGenerateSidebar: true +needGenerateH3Content: true +noTitleIndex: true +title: Vue Document Viewer - Dynamsoft Document Viewer Documentation +keywords: Documentation, Dynamsoft Document Viewer, PDF, Getting Started, Vue +breadcrumbText: Vue +description: Learn how to integrate Dynamsoft Document Viewer into your Vue project with this step-by-step guide. +--- + +# How to Integrate Document Viewer into a Vue Project + +This guide will show you how to integrate Dynamsoft Document Viewer into a Vue project. + +You can can download the sample on GitHub: + +![Download](/assets/imgs/download.png)[Vue Helloworld](https://github.com/Dynamsoft/document-viewer-samples/blob/main/hello-world/vue) + +## Preparation + +Make sure you have node installed. + +## New Project + +Create a new Vue project. + +```bash +npm create vite@latest ddv-vue -- --template vue-ts +``` + +## Add Dependencies + +1. Install Dynamsoft Document Viewer. + + ```bash + npm install dynamsoft-document-viewer + ``` + +2. Copy the resources of Dynamsoft Document Viewer into the public folder. + + + 1. Install `rollup-plugin-copy` as `devDependencies`. + + ```bash + npm install rollup-plugin-copy --save-dev + ``` + + + 2. Modify `vite.config.ts` to copy the resources. + + ```js + import copy from "rollup-plugin-copy"; + export default defineConfig({ + //... + plugins: [ + copy({ + targets: [ + { + src: "node_modules/dynamsoft-document-viewer/dist", + dest: "public/dynamsoft-document-viewer", + }, + ], + hook: "buildStart", + }), + vue(), + ], + //... + }) + ``` + + +## Create a Document Viewer Component + +1. Create a viewer component file under `src/Component/viewer.vue`. + +2. Add the following content in the component file. It will bind Edit Viewer to a container. A license is set here. You can apply for a 30-day trial on [this page](https://www.dynamsoft.com/customer/license/trialLicense/?product=ddv). + + ```html + + + + + + + ``` + +## Use the Document Viewer Component + +Open `App.vue` and add the viewer component. + +```html + + + + + +``` + +Run the app using the following command and you should see the viewer mounted in your application! + +```bash +npm run dev +``` + +## Other Samples + +You can find other samples on [this GitHub repo](https://github.com/Dynamsoft/document-viewer-samples/). diff --git a/index.md b/index.md index f61d20a..f11ef62 100644 --- a/index.md +++ b/index.md @@ -14,6 +14,10 @@ description: Dynamsoft Document Viewer Documentation Homepage - [Adding the dependency]({{ site.gettingstarted }}add_dependency.html) - [SDK Initialization]({{ site.gettingstarted }}sdk_init.html) - [Creating HelloWorld]({{ site.gettingstarted }}helloworld.html) + - Libraries and Frameworks + - [Angular](/gettingstarted/angular.md) + - [React](/gettingstarted/react.md) + - [Vue](/gettingstarted/vue.md) - [Features]({{ site.features }}index.html) - Data Management - [Document Management]({{ site.features }}datamanagement/docmanagement.html)