Skip to content

Commit 4e0acfc

Browse files
ztyyLVztyyLV
authored
Merge pull request #650 from ztyyLV/Jackson-branch
Jackson branch
2 parents d33aa1e + 346fbc3 commit 4e0acfc

File tree

5 files changed

+206
-16
lines changed

5 files changed

+206
-16
lines changed

‎_data/full_tree.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@ tree_list:
5151
path: /indepth/development/react.html
5252
- name: Use Web TWAIN in Vue
5353
path: /indepth/development/vue.html
54+
- name: Use Web TWAIN in Vue 3
55+
path: /indepth/development/vue3.html
5456
- name: Simple Demo
5557
path: https://www.dynamsoft.com/web-twain/resources/code-gallery/
5658
- name: API Reference

‎getstarted/vue.md‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -203,9 +203,4 @@ If you have installed `DWT` and have configured a valid `ProductKey` . You will
203203

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

206-
## Official Samples
207-
208-
Check out the following sample project:
209-
210-
* [dwt-vue](https://github.com/Dynamsoft/web-twain-vue-advanced)
211206

‎getstarted/vue3.md‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
---
2+
layout: default-layout
3+
needAutoGenerateSidebar: true
4+
title: Dynamic Web TWAIN SDK Development - Vue 3 Integration
5+
keywords: Dynamic Web TWAIN, Documentation, Development, Vue3 Integration
6+
breadcrumbText: Vue 3 Integration
7+
description: Dynamic Web TWAIN SDK Documentation Vue 3 Integration Page
8+
permalink: /indepth/development/vue3.html
9+
---
10+
11+
# Use Web TWAIN in Vue 3
12+
13+
[Vue](https://vuejs.org/) is a progressive framework for building user interfaces. Check out the following guide on how to integrate `DWT` into a Vue application.
14+
15+
## Preparation
16+
17+
The recommended version for Vue and Node is `v3.2.22` and `v16+` respectively.
18+
19+
## Create the sample project
20+
21+
### Create a bootstrapped raw Vue 3 application
22+
23+
Assume the project name is "dwt-vue3"
24+
25+
``` cmd
26+
npm init vue@latest
27+
```
28+
29+
### Navigate to the root directory of the application and install the `dwt` and `ncp` package
30+
31+
``` cmd
32+
cd dwt-vue3
33+
```
34+
35+
``` cmd
36+
npm install
37+
```
38+
39+
``` cmd
40+
npm install dwt
41+
```
42+
43+
``` cmd
44+
npm install ncp
45+
```
46+
47+
## Configure the project
48+
49+
Open `package.json` and change `scripts` as seen below:
50+
51+
``` json
52+
"scripts": {
53+
"dev": "ncp node_modules/dwt/dist public/dwt-resources && vite",
54+
"build": "ncp node_modules/dwt/dist public/dwt-resources && vite build",
55+
"preview": "vite preview"
56+
},
57+
```
58+
59+
> The change ensures the static files required to run `DWT` are copied over to the resulting built project.
60+
61+
## Start to implement
62+
63+
### Edit the default component
64+
65+
Create `localScan.vue` in the folder /src/components
66+
67+
```html
68+
<script setup>
69+
import Dynamsoft from "dwt";
70+
import { onMounted, onUnmounted, ref } from "vue";
71+
let selectedIndex = ref(0);
72+
let sourceList=ref([]);
73+
let DWObject;
74+
const containerId = "dwtcontrolContainer";
75+
onMounted(() => {
76+
/**
77+
* ResourcesPath & ProductKey must be set in order to use the library!
78+
*/
79+
Dynamsoft.DWT.AutoLoad = false;
80+
Dynamsoft.DWT.ResourcesPath = "/dwt-resources";
81+
Dynamsoft.DWT.ProductKey ="YOUR-PRODUCT-KEY";
82+
Dynamsoft.DWT.Containers = [
83+
{
84+
WebTwainId: "dwtObject",
85+
ContainerId: containerId,
86+
Width: "500px",
87+
Height: "600px",
88+
},
89+
];
90+
Dynamsoft.DWT.RegisterEvent("OnWebTwainReady", () => {
91+
Dynamsoft_OnReady();
92+
});
93+
Dynamsoft.DWT.Load();
94+
});
95+
onUnmounted(()=>{
96+
Dynamsoft.DWT.Unload();
97+
})
98+
function Dynamsoft_OnReady() {
99+
DWObject = Dynamsoft.DWT.GetWebTwain(containerId);
100+
DWObject.GetDevicesAsync()
101+
.then((deviceList) => {
102+
sourceList.value = deviceList;
103+
})
104+
.catch((e) => {
105+
console.error(e);
106+
});
107+
}
108+
/**
109+
* Acquire images from scanners
110+
*/
111+
function acquireImage() {
112+
DWObject.SelectDeviceAsync(sourceList.value[selectedIndex.value])
113+
.then(() => {
114+
return DWObject.AcquireImageAsync({IfCloseSourceAfterAcquire:true});
115+
})
116+
.catch((e) => {
117+
console.error(e);
118+
})
119+
}
120+
121+
/**
122+
* Open local images.
123+
*/
124+
function openImage() {
125+
DWObject.IfShowFileDialog = true;
126+
/**
127+
* Note:
128+
* This following line of code uses the PDF Rasterizer which is an extra add-on that is licensed seperately
129+
*/
130+
DWObject.Addon.PDF.SetConvertMode(Dynamsoft.DWT.EnumDWT_ConvertMode.CM_RENDERALL);
131+
DWObject.LoadImageEx(
132+
"",
133+
Dynamsoft.DWT.EnumDWT_ImageType.IT_ALL,
134+
() => {
135+
//success
136+
},
137+
() => {
138+
//failure
139+
}
140+
);
141+
}
142+
</script>
143+
144+
<template>
145+
<div>
146+
<select v-model="selectedIndex">
147+
<option
148+
v-for="(source, index) in sourceList"
149+
:value="index"
150+
:key="index"
151+
>
152+
{{ source.displayName }}
153+
</option>
154+
</select>
155+
<button @click="acquireImage()">Acquire Images</button>
156+
<button @click="openImage()">Open Documents</button>
157+
<div :id="containerId"></div>
158+
</div>
159+
</template>
160+
161+
<style scoped></style>
162+
```
163+
164+
> Note:
165+
> * `containerId` specifies the DIV to create `DWT` viewer, which is defined in the `template`.
166+
> * `OnWebTwainReady` is the callback triggered when `DWT` initialization succeeds.
167+
> * `ProductKey` must be set to a valid trial or full key.
168+
> * `ResourcesPath` is set to the location of the static files mentioned in [Configure the project](#configure-the-project).
169+
170+
Change the file /src/App.vue
171+
172+
```html
173+
<script setup>
174+
import HelloWorld from './components/localScan.vue'
175+
</script>
176+
177+
<template>
178+
<HelloWorld />
179+
</template>
180+
181+
<style scoped>
182+
</style>
183+
```
184+
185+
### Try running the project
186+
187+
``` cmd
188+
npm run dev
189+
```
190+
191+
#### On desktop
192+
193+
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]({{site.indepth}}features/initialize.html#installation-of-the-dynamsoft-service) that guides you on installing the library.
194+
195+
#### On mobile
196+
197+
For Android, the scanners that support ESCL can be used.
198+
199+
## Official Samples
200+
201+
Check out the following sample project:
202+
203+
* [dwt-vue](https://github.com/Dynamsoft/web-twain-vue-advanced)

‎info/api/WebTwain_Buffer.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1895,7 +1895,7 @@ Action types include
18951895
- `add`: New pages are added to the buffer.
18961896
- `remove`: The existing pages are removed.
18971897
- `modify`: The existing pages are modified.
1898-
- `shift`: The existing pages are reordered.
1898+
- `shift`: The existing pages are reordered or the selected pages are changed.
18991899
- `filter`: The existing pages are filtered by a tag.
19001900

19011901
---

‎info/api/WebTwain_Util.md‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -234,16 +234,6 @@ Generate a URL to be used by a FileUpoader instance to fetch the data to upload.
234234
**Syntax**
235235

236236
```typescript
237-
/**
238-
*
239-
* @param indices Specify the images to upload.
240-
* @param type Specify the file type.
241-
* @param successCallback A callback function that is executed if the request succeeds.
242-
* @param failureCallback A callback function that is executed if the request fails.
243-
* @argument resultURL The generated URL.
244-
* @argument indices The indices of the images.
245-
* @argument type The file type.
246-
*/
247237
GenerateURLForUploadData(
248238
indices: number[],
249239
type: Dynamsoft.DWT.EnumDWT_ImageType | number,

0 commit comments

Comments
 (0)