Use Web TWAIN in Vue

<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 seperately
       */
      this.DWTObject.Addon.PDF.SetConvertMode(
        Dynamsoft.DWT.EnumDWT_ConvertMode.CM_RENDERALL
      );
      this.DWTObject.LoadImageEx(
        "",
        Dynamsoft.DWT.EnumDWT_ImageType.IT_ALL,
        () => {
          //success
        },
        () => {
          //failure
        }
      );
    },
  },
};
</script>

<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 seperately
   */
  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>

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

<template>
    <HelloWorld />
</template>

<style scoped>
</style>