Add a document viewer example

Author: yushulx

angular.json

@@ -84,6 +84,11 @@
                 "glob": "**/*",
                 "input": "./node_modules/dynamsoft-label-recognizer-data/dist",
                 "output": "assets/dynamsoft-label-recognizer-data"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/dynamsoft-document-viewer/dist",
+                "output": "assets/dynamsoft-document-viewer"
               }
             ],
             "styles": [

package-lock.json

@@ -24,6 +24,7 @@
     "dynamsoft-capture-vision-std": "^1.2.10",
     "dynamsoft-code-parser": "^2.2.10",
     "dynamsoft-document-normalizer": "^2.2.10",
+    "dynamsoft-document-viewer": "^2.0.0",
     "dynamsoft-image-processing": "^2.2.30",
     "dynamsoft-label-recognizer": "^3.2.30",
     "dynamsoft-label-recognizer-data": "^1.0.11",

package.json

@@ -7,6 +7,7 @@ import { FileDetectionComponent } from './file-detection/file-detection.componen
 import { CameraDetectionComponent } from './camera-detection/camera-detection.component';
 import { MrzReaderComponent } from './mrz-reader/mrz-reader.component';
 import { MrzScannerComponent } from './mrz-scanner/mrz-scanner.component';
+import { DocumentViewerComponent } from './document-viewer/document-viewer.component';
 
 const routes: Routes = [
   { path: '', component: ProductListComponent },
@@ -15,7 +16,8 @@ const routes: Routes = [
   { path: 'file-detection', component: FileDetectionComponent },
   { path: 'camera-detection', component: CameraDetectionComponent },
   { path: 'mrz-reader', component: MrzReaderComponent },
-  { path: 'mrz-scanner', component: MrzScannerComponent }
+  { path: 'mrz-scanner', component: MrzScannerComponent },
+  { path: 'document-viewer', component: DocumentViewerComponent }
 ];
 
 @NgModule({

src/app/app-routing.module.ts

@@ -12,8 +12,7 @@ import { FileDetectionComponent } from './file-detection/file-detection.componen
 import { CameraDetectionComponent } from './camera-detection/camera-detection.component';
 import { MrzReaderComponent } from './mrz-reader/mrz-reader.component';
 import { MrzScannerComponent } from './mrz-scanner/mrz-scanner.component';
-
-// import {NgxBarcodeQrcodeModule} from 'ngx-barcode-qrcode';
+import { DocumentViewerComponent } from './document-viewer/document-viewer.component';
 
 @NgModule({
   declarations: [
@@ -26,7 +25,7 @@ import { MrzScannerComponent } from './mrz-scanner/mrz-scanner.component';
     CameraDetectionComponent,
     MrzReaderComponent,
     MrzScannerComponent,
-
+    DocumentViewerComponent,
   ],
   imports: [
     BrowserModule,

src/app/app.module.ts

@@ -0,0 +1,6 @@
+#document_container {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    left: 0;
+}

src/app/document-viewer/document-viewer.component.css

@@ -0,0 +1 @@
+<div id="document_container"></div>

src/app/document-viewer/document-viewer.component.html

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DocumentViewerComponent } from './document-viewer.component';
+
+describe('DocumentViewerComponent', () => {
+  let component: DocumentViewerComponent;
+  let fixture: ComponentFixture<DocumentViewerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DocumentViewerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DocumentViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/document-viewer/document-viewer.component.spec.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { DDV, EditViewer } from 'dynamsoft-document-viewer';
+
+@Component({
+  selector: 'app-document-viewer',
+  templateUrl: './document-viewer.component.html',
+  styleUrls: ['./document-viewer.component.css']
+})
+export class DocumentViewerComponent implements OnInit {
+  editViewer?: EditViewer;
+
+  constructor() {
+
+  }
+
+  ngOnInit(): void {
+    let config = DDV.getDefaultUiConfig("editViewer", { includeAnnotationSet: true });
+    this.editViewer = new DDV.EditViewer({
+      container: "document_container",
+      uiConfig: config!,
+    });
+  }
+
+}

src/app/document-viewer/document-viewer.component.ts

@@ -58,6 +58,14 @@ <h3>
         </ng-template>
       </div>
 
+      <div>
+        <ng-template [ngIf]="product.id === 'document-viewer'">
+          <a [title]="product.name + ' details'" [routerLink]="['/document-viewer']">>
+            {{ product.name }}
+          </a>
+        </ng-template>
+      </div>
+
     </h3>
 
     <p *ngIf="product.description">Description: {{ product.description }}</p>

src/app/product-list/product-list.component.html

@@ -10,6 +10,8 @@ import 'dynamsoft-document-normalizer';
 import 'dynamsoft-label-recognizer';
 import 'dynamsoft-code-parser';
 import { getFullUrl } from '../utils';
+import { DDV } from 'dynamsoft-document-viewer';
+
 
 @Component({
   selector: 'app-product-list',
@@ -49,7 +51,10 @@ export class ProductListComponent {
       let licenseKey: string = this.inputText === '' ? this.placeholderText : this.inputText;
       await LicenseManager.initLicense(licenseKey, true);
 
-
+      // DDV.Core.license = licenseKey;
+      DDV.Core.engineResourcePath = getFullUrl('assets/dynamsoft-document-viewer/engine/');
+      await DDV.Core.init();
+      DDV.setProcessingHandler("imageFilter", new DDV.ImageFilter());
       // Preload wasm files for saving the time of loading it when needed.
       // await CoreModule.loadWasm(['DBR', 'DDN']);
 

src/app/product-list/product-list.component.ts

@@ -36,5 +36,11 @@ export const products = [
     name: 'MRZ Scanner',
     description: 'Scan MRZ from camera stream',
   },
+  {
+    id: 'document-viewer',
+    name: 'Document Viewer',
+    description: 'View, edit and save documents',
+  },
+
 ];
 

src/app/products.ts

@@ -1,13 +1,17 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>MyApp</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="assets/dynamsoft-document-viewer/ddv.css">
 </head>
+
 <body>
   <app-root></app-root>
 </body>
-</html>
+
+</html>

src/index.html

@@ -10,6 +10,7 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
@@ -29,4 +30,4 @@
     "strictInputAccessModifiers": true,
     "strictTemplates": true
   }
-}
+}