Ask AI
See all results >
Download 30-Day Trial Get Pricing
Table of contents

Thanks for Downloading Dynamic Web TWAIN 30-Day Trial!

Your download will start shortly. If your download does not begin, click here to retry.

Use Web TWAIN in Vue

Vue is a progressive framework for building user interfaces. Check out the following guide on how to integrate DWT into a Vue application.

Preparation

Make sure you have node, yarn, and Vue CLI installed. node 14.4.0 , yarn 1.22.4, and @vue/cli 4.46 are used in the example below.

Create the sample project

Create a bootstrapped raw Vue application

vue create dwt-vue

yarn add dwt@19.2.0

yarn add ncp

ncp is used to copy static resources files.

Configure the project

Open package.json and change scripts as seen below:

"scripts": {
    "serve": "ncp node_modules/dwt/dist public/dwt-resources && vue-cli-service serve",
    "build": "vue-cli-service build&& ncp node_modules/dwt/dist build/dwt-resources",
    "lint": "vue-cli-service lint"
},

The change ensures the static files required to run DWT are copied over to the resulting built project.

We can get these resource files in a few different ways. See our resource loading guide to see how to load resource files from our official SDK, CDNs, or package managers.

Start to implement

Edit the default component

Change the file /src/components/HelloWorld.vue to match the following template and script (keep the style as is)

<template>
  <div class="hello">
    <h1></h1>
    <select id="sources" v-model="selectedIndex">
      <option
        v-for="(source, index) in sourceList"
        v-bind:value="index"
        :key="index"
      >
        {{ source.displayName }}
      </option>
    </select>
    <button @click="acquireImage()">Acquire Images</button>
    <button @click="openImage()">Open Documents</button>
    <br />
    <br />
    <div v-bind:id="containerId"></div>
  </div>
</template>
<script>
import Dynamsoft from "dwt";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      containerId: "dwtcontrolContainer",
      sourceList: [],
      selectedIndex: 0,
    };
  },
  mounted() {
    /**
     * ResourcesPath & ProductKey must be set in order to use the library!
     */
    Dynamsoft.DWT.ResourcesPath = "/dwt-resources";
    Dynamsoft.DWT.ProductKey = "YOUR-PRODUCT-KEY";
    Dynamsoft.DWT.Containers = [
      {
        WebTwainId: "dwtObject",
        ContainerId: this.containerId,
        Width: "100%",
        Height: "400px",
      },
    ];
    Dynamsoft.DWT.RegisterEvent("OnWebTwainReady", () => {
      this.Dynamsoft_OnReady();
    });
    Dynamsoft.DWT.Load();
  },
  methods: {
    /**
     * Dynamsoft_OnReady is called when a WebTwain instance is ready to use.
     * In this callback we do some initialization.
     */
    Dynamsoft_OnReady() {
      this.DWTObject = Dynamsoft.DWT.GetWebTwain(this.containerId);
      this.DWTObject.GetDevicesAsync()
        .then((deviceList) => {
          this.sourceList = deviceList;
        })
        .catch((e) => {
          console.error(e);
        });
    },
    /**
     * Acquire images from scanners or cameras or local files
     */
    acquireImage() {
      if (!this.DWTObject) {
        alert("dwt init fail");
        return;
      }
 
        this.DWTObject.SelectDeviceAsync(this.sourceList[this.selectedIndex])
          .then(() => {
            return this.DWTObject.AcquireImageAsync({
                IfCloseSourceAfterAcquire: true 
            });
          })
          .catch((e) => {
            console.error(e);
          });
    },
    /**
     * Open local images.
     */
    openImage() {
      if (!this.DWTObject) {
        alert("dwt init fail");
        return;
      }
      this.DWTObject.IfShowFileDialog = true;
      /**
       * Note:
       * This following line of code uses the PDF Rasterizer which is an extra add-on that is licensed separately
       */
      this.DWTObject.Addon.PDF.SetConvertMode(
        Dynamsoft.DWT.EnumDWT_ConvertMode.CM_RENDERALL
      );
      this.DWTObject.LoadImageEx(
        "",
        Dynamsoft.DWT.EnumDWT_ImageType.IT_ALL,
        () => {
          //success
        },
        () => {
          //failure
        }
      );
    },
  },
};
</script>

Note:

  • containerId specifies the DIV to create DWT viewer, which is defined in the template.
  • OnWebTwainReady is the callback triggered when DWT initialization succeeds.
  • ProductKey must be set to a valid trial or full key.
  • ResourcesPath is set to the location of the static files mentioned in Configure the project.

Try running the project

yarn serve

On desktop

If you have installed DWT and have configured a valid ProductKey . You will have a working page to scan documents from your scanner now. Otherwise, you should see instructions on this page that guides you on installing the library.

On mobile

You should be able to open a file or capture an image.

Preparation

The recommended versions for Vue and Node are v3.2.22 and v16+ respectively.

Create the sample project

Create a bootstrapped raw Vue 3 application

Assume the project name is “dwt-vue3”

npm init vue@latest

cd dwt-vue3

npm install

npm install dwt@19.2.0

npm install ncp

Configure the project

Open package.json and change scripts as seen below:

"scripts": {
    "dev": "ncp node_modules/dwt/dist public/dwt-resources && vite",
    "build": "ncp node_modules/dwt/dist public/dwt-resources && vite build",
    "preview": "vite preview"
},

The change ensures the static files required to run DWT are copied over to the resulting built project.

We can get these resource files in a few different ways. See our resource loading guide to see how to load resource files from our official SDK, CDNs, or package managers.

Start to implement

Edit the default component

Create localScan.vue in the folder /src/components

<script setup>
import Dynamsoft from "dwt";
import { onMounted, onUnmounted, ref } from "vue";
let selectedIndex = ref(0);
let sourceList=ref([]);
let DWTObject;
const containerId = "dwtcontrolContainer";
onMounted(() => {
  /**
   * ResourcesPath & ProductKey must be set in order to use the library!
   */
  Dynamsoft.DWT.AutoLoad = false;
  Dynamsoft.DWT.ResourcesPath = "/dwt-resources";
  Dynamsoft.DWT.ProductKey ="YOUR-PRODUCT-KEY";
  Dynamsoft.DWT.Containers = [
    {
      WebTwainId: "dwtObject",
      ContainerId: containerId,
      Width: "500px",
      Height: "600px",
    },
  ];
  Dynamsoft.DWT.RegisterEvent("OnWebTwainReady", () => {
    Dynamsoft_OnReady();
  });
  Dynamsoft.DWT.Load();
});
onUnmounted(()=>{
    Dynamsoft.DWT.Unload();
})
function Dynamsoft_OnReady() {
  DWTObject = Dynamsoft.DWT.GetWebTwain(containerId);
  DWTObject.GetDevicesAsync()
    .then((deviceList) => {
      sourceList.value = deviceList;
    })
    .catch((e) => {
      console.error(e);
    });
}
/**
 * Acquire images from scanners
 */
function acquireImage() {
    DWTObject.SelectDeviceAsync(sourceList.value[selectedIndex.value])
      .then(() => {
        return DWTObject.AcquireImageAsync({IfCloseSourceAfterAcquire:true});
      })
      .catch((e) => {
        console.error(e);
      })
}

/**
 * Open local images.
 */
function openImage() {
  DWTObject.IfShowFileDialog = true;
  /**
   * Note:
   * This following line of code uses the PDF Rasterizer which is an extra add-on that is licensed separately
   */
  DWTObject.Addon.PDF.SetConvertMode(Dynamsoft.DWT.EnumDWT_ConvertMode.CM_RENDERALL);
  DWTObject.LoadImageEx(
    "",
    Dynamsoft.DWT.EnumDWT_ImageType.IT_ALL,
    () => {
      //success
    },
    () => {
      //failure
    }
  );
}
</script>

<template>
  <div>
    <select v-model="selectedIndex">
      <option
        v-for="(source, index) in sourceList"
        :value="index"
        :key="index"
      >
        {{ source.displayName }}
      </option>
    </select>
    <button @click="acquireImage()">Acquire Images</button>
    <button @click="openImage()">Open Documents</button>
    <div :id="containerId"></div>
  </div>
</template>

<style scoped></style>

Note:

  • containerId specifies the DIV to create DWT viewer, which is defined in the template.
  • OnWebTwainReady is the callback triggered when DWT initialization succeeds.
  • ProductKey must be set to a valid trial or full key.
  • ResourcesPath is set to the location of the static files mentioned in Configure the project.

Change the file /src/App.vue

<script setup>
import HelloWorld from './components/localScan.vue'
</script>

<template>
    <HelloWorld />
</template>

<style scoped>
</style>

Try running the project

npm run dev

On desktop

If you have installed DWT and have configured a valid ProductKey . You will have a working page to scan documents from your scanner now. Otherwise, you should see instructions on this page that guides you on installing the library.

Official Samples

Check out the following sample project:

Is this page helpful?

YesYes NoNo

In this article: