Skip to content

Commit 2ab24c4

Browse files
tony-xlhtony-xlh
authored
Merge pull request #258 from dynamsoft-docs/preview
Add frameworks guides
2 parents 915da0c + 7033170 commit 2ab24c4

File tree

9 files changed

+531
-6
lines changed

9 files changed

+531
-6
lines changed

‎_includes/sidelist-gettingstarted.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
<li><a href="{{ site.gettingstarted }}add_dependency.html" class="otherLinkColour">Adding the dependency</a></li>
55
<li><a href="{{ site.gettingstarted }}sdk_init.html" class="otherLinkColour">SDK Initialization</a></li>
66
<li><a href="{{ site.gettingstarted }}helloworld.html" class="otherLinkColour">Creating HelloWorld</a></li>
7-
{% comment %} <li><a class="otherLinkColour">Learn More</a>
7+
<li><a class="otherLinkColour">Libraries and Frameworks</a>
88
<ul>
9-
<li><a href="{{ site.gettingstarted }}learnmore/dwc.html" class="otherLinkColour">Dynamsoft Web Capture</a></li>
9+
<li><a href="{{ site.gettingstarted }}angular.html" class="otherLinkColour">Angular</a></li>
10+
<li><a href="{{ site.gettingstarted }}react.html" class="otherLinkColour">React</a></li>
11+
<li><a href="{{ site.gettingstarted }}vue.html" class="otherLinkColour">Vue</a></li>
1012
</ul>
11-
</li> {% endcomment %}
13+
</li>
1214
</ul>
1315
</li>

‎_v1.1/features/advanced/documentdetect.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -228,8 +228,6 @@ Dynamsoft.DDV.setProcessingHandler("documentBoundariesDetect", detectHandler);
228228
</html>
229229
```
230230

231-
![Docuemnt Detect](/assets/imgs/documentdetect.GIF)
232-
233231
## Reference
234232

235233
- [`DocumentDetect class`]({{ site.api }}class/advanced/documentdetect.html)

‎api/namespace/ddv_core.md

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ permalink: /api/namespace/ddv_core.html
1818

1919
| API Name | Description |
2020
| -------------------- | ------------------------------------------------------------ |
21-
| [`license` ](#engineresourcepath) | Specify the license string. |
21+
| [`versionInfo` ](#versioninfo) | Get the version info of the SDK. |
22+
| [`license` ](#license) | Specify the license string. |
2223
| [`engineResourcePath`](#engineresourcepath) | Specify the path should lead to a folder containing the distributed WASM files. |
2324
| [`deviceFriendlyName`](#devicefriendlyname) | Specify a human-readable name for the device which corresponds to its UUID. |
2425

@@ -31,6 +32,25 @@ permalink: /api/namespace/ddv_core.html
3132

3233
## Properties
3334

35+
### versionInfo
36+
37+
Get the version info of the SDK.
38+
39+
**Syntax**
40+
41+
```typescript
42+
versionInfo: DDVVersionInfo;
43+
```
44+
45+
It will return an object like the following example:
46+
47+
```
48+
{
49+
viewer: '3.0.0',
50+
engine: '3.0.0'
51+
}
52+
```
53+
3454
### license
3555

3656
Specify the license string.

‎assets/imgs/download.png

4.78 KB
Loading

‎gettingstarted/angular.md

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
---
2+
layout: default-layout
3+
needAutoGenerateSidebar: true
4+
needGenerateH3Content: true
5+
noTitleIndex: true
6+
title: Angular Document Viewer - Dynamsoft Document Viewer Documentation
7+
keywords: Documentation, Dynamsoft Document Viewer, PDF, Getting Started, Angular
8+
breadcrumbText: Angular
9+
description: Learn how to integrate Dynamsoft Document Viewer into your Angular project with this step-by-step guide.
10+
---
11+
12+
# How to Integrate Document Viewer into an Angular Project
13+
14+
This guide will show you how to integrate Dynamsoft Document Viewer into an Angular project.
15+
16+
You can can download the sample on GitHub:
17+
18+
![Download](/assets/imgs/download.png)[Angular Helloworld](https://github.com/Dynamsoft/document-viewer-samples/blob/main/hello-world/angular)
19+
20+
## Preparation
21+
22+
Make sure you have node and Angular CLI (v17 in this guide) installed.
23+
24+
## New Project
25+
26+
Create a new Angular project.
27+
28+
```bash
29+
ng new ddv-angular
30+
```
31+
32+
## Add Dependencies
33+
34+
1. Install Dynamsoft Document Viewer.
35+
36+
```bash
37+
npm install dynamsoft-document-viewer
38+
```
39+
40+
2. Modify `angular.json` to copy the resources of Dynamsoft Document Viewer and import its CSS.
41+
42+
43+
```json
44+
{
45+
"assets": [
46+
"src/favicon.ico",
47+
"src/assets",
48+
{
49+
"glob": "**/*",
50+
"input": "node_modules/dynamsoft-document-viewer/dist",
51+
"output": "/dynamsoft-document-viewer/dist"
52+
}
53+
],
54+
"styles": [
55+
"src/styles.css",
56+
"node_modules/dynamsoft-document-viewer/dist/ddv.css"
57+
]
58+
}
59+
```
60+
61+
## Create a Document Viewer Component
62+
63+
1. Generate a viewer component.
64+
65+
```bash
66+
ng generate component viewer
67+
```
68+
69+
2. Add the following HTML code to `viewer.component.html`.
70+
71+
```html
72+
<div id="container"></div>
73+
```
74+
75+
3. Add the following CSS code to `viewer.component.css`.
76+
77+
```css
78+
:host, #container {
79+
width: 100%;
80+
height: 100%;
81+
}
82+
```
83+
84+
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).
85+
86+
```ts
87+
import { Component } from '@angular/core';
88+
import { DDV } from 'dynamsoft-document-viewer';
89+
90+
@Component({
91+
selector: 'app-viewer',
92+
standalone: true,
93+
imports: [],
94+
templateUrl: './viewer.component.html',
95+
styleUrl: './viewer.component.css'
96+
})
97+
98+
export class ViewerComponent {
99+
async ngOnInit() {
100+
DDV.on('error', (e) => {
101+
alert(e.message)
102+
})
103+
104+
// Public trial license which is valid for 24 hours
105+
DDV.Core.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
106+
DDV.Core.engineResourcePath = '/dynamsoft-document-viewer/dist/engine';
107+
DDV.Core.loadWasm();
108+
await DDV.Core.init();
109+
110+
const viewer = new DDV.EditViewer({
111+
container: 'container'
112+
});
113+
}
114+
}
115+
```
116+
117+
## Use the Document Viewer Component
118+
119+
120+
1. Open `app.component.html` and add the viewer component.
121+
122+
```html
123+
<style></style>
124+
<h1>Hello World for Angular</h1>
125+
<app-viewer
126+
></app-viewer>
127+
<router-outlet></router-outlet>
128+
```
129+
130+
2. Import the viewer component in `app.component.ts`.
131+
132+
```js
133+
import { ViewerComponent } from './components/viewer/viewer.component';
134+
135+
@Component({
136+
selector: 'app-root',
137+
standalone: true,
138+
templateUrl: './app.component.html',
139+
styleUrl: './app.component.css',
140+
imports: [
141+
CommonModule,
142+
RouterOutlet,
143+
ViewerComponent,
144+
],
145+
})
146+
```
147+
148+
3. Add CSS in `app.component.css`.
149+
150+
```css
151+
:host {
152+
width: 100%;
153+
height: 100%;
154+
display: flex;
155+
flex-direction: column;
156+
}
157+
```
158+
159+
Run the app with the following command and you should see the viewer mounted in your application!
160+
161+
```bash
162+
ng serve
163+
```
164+
165+
## Other Samples
166+
167+
You can find other samples on [this GitHub repo](https://github.com/Dynamsoft/document-viewer-samples/).
168+
169+
170+

‎gettingstarted/learnmore/mwc.md

Whitespace-only changes.

0 commit comments

Comments
 (0)