Site Overlay

How to Create a Document Scanner App with Ionic Framework

How to Create a Document Scanner App with Ionic Framework

This will be a quick tutorial for “Document Scanner App with Ionic”. We’ll use the ionic framework to create a document scanner app. it can work with both capacitor and Cordova. You can check the final output here:-

Let’s Start Our Document Scanner App with Ionic

Before you go through this tutorial, you should have at least a basic understanding of Ionic Framework.

If you’re not familiar with Ionic Framework already, I’d recommend reading my How to install Ionic first for set up and running and understand the basic concepts.

Create a new ionic app

let’s create a new ionic app with the ionic start command:

$ ionic start myApp tabs

Add Document Scanner

In this tutorial we will go with ionic cordova combination. But if you like to use capacitor as the runtime for you application. You can use the capacitor plugin installation as well.

For CORDOVA Application

$ ionic cordova plugin add cordova-plugin-document-scanner

$ npm install @ionic-native/document-scanner

For CAPACITOR Application

If you want you use capacitor as your runtime environment for your ionic application. You can use the following steps for installing document scanner plugin for capacitor. If you don’t know how to connect capacitor with ionic. Then you can follow official documentation of capacitor for Using Capacitor with Ionic Framework

$ npm install cordova-plugin-document-scanner
$ npm install @ionic-native/document-scanner

$ ionic cap sync

Update app.module.ts

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { DocumentScanner } from '@ionic-native/document-scanner/ngx';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    DocumentScanner
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Implementing the Code

Now we are done with the installation of document scanner plugin. So now we can use it anywhere in our application. We are going to implement in our tab1 page as following:

tab1.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>
    <ion-button expand="block" (click)="openSccanner()">Open Sccanner</ion-button>
</ion-content>

tab1.page.ts

import { Component } from '@angular/core';

import { DocumentScanner, DocumentScannerOptions } from '@ionic-native/document-scanner/ngx';


@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  data:any;

  constructor(private documentScanner: DocumentScanner) {}

  openSccanner() {
    let opts: DocumentScannerOptions = {};
    this.documentScanner.scanDoc(opts)
  .then((res: string) => {
    console.log(res)
    this.data = res;
  })
  .catch((error: any) => console.error(error));
  }

}

Building Our Document Scanner App with Ionic

that’s it. we have now done all our coding part and now we are ready to build and test our ionic document scanner app. so now we are going to build our ionic app.

$ ionic cordova platform add android

$ ionic cordova prepare android

this command will prepare android project for our document scanner app and we can open this project in Android Studio. The project folder is located in /platforms folder.

Conclusion

With the help of this plugin it’s actually not really hard to implement your own document scanner with Ionic.

If you wish to build your own document scanner with more advanced features. this guide should be a good place to start.

5 thoughts on “How to Create a Document Scanner App with Ionic Framework

  1. src_app_home_home_module_ts.js:116 Incorrect result or user canceled the action.

    getting this error after clicking image and selecting tick option.

Leave a Reply

Your email address will not be published. Required fields are marked *