@koi-br/ocr-web-sdk 1.0.9 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +100 -6
- package/dist/index.cjs.js +73 -73
- package/dist/index.esm.js +5991 -5963
- package/package.json +1 -1
- package/preview/ImagePreview.vue +30 -29
- package/preview/PdfPreview.vue +41 -40
- package/preview/docxPreview.vue +6 -5
- package/preview/index.vue +41 -4
- package/preview/ofdPreview.vue +5 -5
- package/preview/tifPreview.vue +30 -29
- package/preview/xlsxPreview.vue +17 -17
package/package.json
CHANGED
package/preview/ImagePreview.vue
CHANGED
|
@@ -10,82 +10,82 @@
|
|
|
10
10
|
{{ Math.round(scale * 100) }}%
|
|
11
11
|
</span>
|
|
12
12
|
<div class="toolbar-divider"></div>
|
|
13
|
-
<
|
|
14
|
-
<
|
|
13
|
+
<ATooltip mini position="bottom" content="重置">
|
|
14
|
+
<AButton
|
|
15
15
|
size="small"
|
|
16
16
|
type="outline"
|
|
17
17
|
@click="reset"
|
|
18
18
|
>
|
|
19
19
|
<RefreshCcw :size="16" />
|
|
20
|
-
</
|
|
21
|
-
</
|
|
22
|
-
<
|
|
20
|
+
</AButton>
|
|
21
|
+
</ATooltip>
|
|
22
|
+
<ATooltip
|
|
23
23
|
v-if="originalId"
|
|
24
24
|
mini
|
|
25
25
|
position="bottom"
|
|
26
26
|
content="查看原图"
|
|
27
27
|
>
|
|
28
|
-
<
|
|
28
|
+
<AButton
|
|
29
29
|
size="small"
|
|
30
30
|
type="outline"
|
|
31
31
|
@click="original"
|
|
32
32
|
>
|
|
33
33
|
<Maximize2 :size="16" />
|
|
34
|
-
</
|
|
35
|
-
</
|
|
36
|
-
<
|
|
37
|
-
<
|
|
34
|
+
</AButton>
|
|
35
|
+
</ATooltip>
|
|
36
|
+
<ATooltip mini position="bottom" content="缩小">
|
|
37
|
+
<AButton
|
|
38
38
|
size="small"
|
|
39
39
|
type="outline"
|
|
40
40
|
:disabled="scale <= minScale"
|
|
41
41
|
@click="zoom(-0.1)"
|
|
42
42
|
>
|
|
43
43
|
<ZoomOut :size="16" />
|
|
44
|
-
</
|
|
45
|
-
</
|
|
46
|
-
<
|
|
47
|
-
<
|
|
44
|
+
</AButton>
|
|
45
|
+
</ATooltip>
|
|
46
|
+
<ATooltip mini position="bottom" content="放大">
|
|
47
|
+
<AButton
|
|
48
48
|
size="small"
|
|
49
49
|
type="outline"
|
|
50
50
|
:disabled="scale >= maxScale"
|
|
51
51
|
@click="zoom(0.1)"
|
|
52
52
|
>
|
|
53
53
|
<ZoomIn :size="16" />
|
|
54
|
-
</
|
|
55
|
-
</
|
|
56
|
-
<
|
|
54
|
+
</AButton>
|
|
55
|
+
</ATooltip>
|
|
56
|
+
<ATooltip
|
|
57
57
|
v-if="isDownload"
|
|
58
58
|
mini
|
|
59
59
|
position="bottom"
|
|
60
60
|
content="下载"
|
|
61
61
|
>
|
|
62
|
-
<
|
|
62
|
+
<AButton
|
|
63
63
|
size="small"
|
|
64
64
|
type="outline"
|
|
65
65
|
@click="emit('download')"
|
|
66
66
|
>
|
|
67
67
|
<Download :size="16" />
|
|
68
|
-
</
|
|
69
|
-
</
|
|
68
|
+
</AButton>
|
|
69
|
+
</ATooltip>
|
|
70
70
|
<div class="toolbar-divider"></div>
|
|
71
|
-
<
|
|
72
|
-
<
|
|
71
|
+
<ATooltip mini position="bottom" content="向左旋转">
|
|
72
|
+
<AButton
|
|
73
73
|
size="small"
|
|
74
74
|
type="outline"
|
|
75
75
|
@click="rotateImage('left')"
|
|
76
76
|
>
|
|
77
77
|
<RotateCw :size="16" />
|
|
78
|
-
</
|
|
79
|
-
</
|
|
80
|
-
<
|
|
81
|
-
<
|
|
78
|
+
</AButton>
|
|
79
|
+
</ATooltip>
|
|
80
|
+
<ATooltip mini position="bottom" content="向右旋转">
|
|
81
|
+
<AButton
|
|
82
82
|
size="small"
|
|
83
83
|
type="outline"
|
|
84
84
|
@click="rotateImage('right')"
|
|
85
85
|
>
|
|
86
86
|
<RotateCcw :size="16" />
|
|
87
|
-
</
|
|
88
|
-
</
|
|
87
|
+
</AButton>
|
|
88
|
+
</ATooltip>
|
|
89
89
|
</div>
|
|
90
90
|
</div>
|
|
91
91
|
|
|
@@ -114,7 +114,8 @@
|
|
|
114
114
|
|
|
115
115
|
<script setup>
|
|
116
116
|
import { ref } from 'vue';
|
|
117
|
-
import { ZoomIn, ZoomOut, RefreshCcw, RotateCw, Download, Maximize2 } from 'lucide-vue-next';
|
|
117
|
+
import { ZoomIn, ZoomOut, RefreshCcw, RotateCw, RotateCcw, Download, Maximize2 } from 'lucide-vue-next';
|
|
118
|
+
import { Button as AButton, Tooltip as ATooltip } from '@arco-design/web-vue';
|
|
118
119
|
|
|
119
120
|
const props = defineProps({
|
|
120
121
|
url: {
|
package/preview/PdfPreview.vue
CHANGED
|
@@ -5,21 +5,21 @@
|
|
|
5
5
|
<!-- 左侧: 翻页控制 -->
|
|
6
6
|
<div class="toolbar-group">
|
|
7
7
|
<!-- 目录和印章列表切换按钮 -->
|
|
8
|
-
<
|
|
8
|
+
<ATooltip
|
|
9
9
|
v-if="props.showTocSidebar !== false"
|
|
10
10
|
class="ai-chat-tooltip"
|
|
11
11
|
mini
|
|
12
12
|
position="bottom"
|
|
13
13
|
content="目录和印章"
|
|
14
14
|
>
|
|
15
|
-
<
|
|
15
|
+
<AButton
|
|
16
16
|
size="small"
|
|
17
17
|
type="outline"
|
|
18
18
|
@click="showTocSidebar = !showTocSidebar"
|
|
19
19
|
>
|
|
20
20
|
<List :size="16" />
|
|
21
|
-
</
|
|
22
|
-
</
|
|
21
|
+
</AButton>
|
|
22
|
+
</ATooltip>
|
|
23
23
|
|
|
24
24
|
<div class="page-info">
|
|
25
25
|
<!-- 当前页码输入框（自定义实现） -->
|
|
@@ -40,12 +40,12 @@
|
|
|
40
40
|
<!-- 右侧: 缩放控制和全屏控制 -->
|
|
41
41
|
<div class="toolbar-group">
|
|
42
42
|
<!-- 缩放模式选择 -->
|
|
43
|
-
<
|
|
44
|
-
<
|
|
43
|
+
<ADropdown trigger="hover" @select="handleScaleModeChange">
|
|
44
|
+
<AButton size="small" type="outline" class="scale-mode-btn">
|
|
45
45
|
<component :is="currentScaleModeIcon" :size="16" />
|
|
46
|
-
</
|
|
46
|
+
</AButton>
|
|
47
47
|
<template #content>
|
|
48
|
-
<
|
|
48
|
+
<ADoption
|
|
49
49
|
v-for="mode in scaleModeOptions"
|
|
50
50
|
:key="mode.value"
|
|
51
51
|
:value="mode.value"
|
|
@@ -67,73 +67,73 @@
|
|
|
67
67
|
class="scale-mode-item-check"
|
|
68
68
|
/>
|
|
69
69
|
</div>
|
|
70
|
-
</
|
|
70
|
+
</ADoption>
|
|
71
71
|
</template>
|
|
72
|
-
</
|
|
72
|
+
</ADropdown>
|
|
73
73
|
|
|
74
74
|
<!-- 分隔线 -->
|
|
75
75
|
<div class="toolbar-divider"></div>
|
|
76
76
|
|
|
77
77
|
<!-- 重置按钮 -->
|
|
78
|
-
<
|
|
79
|
-
<
|
|
78
|
+
<ATooltip mini position="bottom" content="重置">
|
|
79
|
+
<AButton size="small" type="outline" @click="reset">
|
|
80
80
|
<RefreshCcw :size="16" />
|
|
81
|
-
</
|
|
82
|
-
</
|
|
81
|
+
</AButton>
|
|
82
|
+
</ATooltip>
|
|
83
83
|
|
|
84
84
|
<!-- 缩小按钮 -->
|
|
85
|
-
<
|
|
86
|
-
<
|
|
85
|
+
<ATooltip mini position="bottom" content="缩小">
|
|
86
|
+
<AButton
|
|
87
87
|
size="small"
|
|
88
88
|
type="outline"
|
|
89
89
|
:disabled="scale <= 0.5"
|
|
90
90
|
@click="zoomOut"
|
|
91
91
|
>
|
|
92
92
|
<ZoomOut :size="16" />
|
|
93
|
-
</
|
|
94
|
-
</
|
|
93
|
+
</AButton>
|
|
94
|
+
</ATooltip>
|
|
95
95
|
|
|
96
96
|
<!-- 放大按钮 -->
|
|
97
|
-
<
|
|
98
|
-
<
|
|
97
|
+
<ATooltip mini position="bottom" content="放大">
|
|
98
|
+
<AButton
|
|
99
99
|
size="small"
|
|
100
100
|
type="outline"
|
|
101
101
|
:disabled="scale >= 3"
|
|
102
102
|
@click="zoomIn"
|
|
103
103
|
>
|
|
104
104
|
<ZoomIn :size="16" />
|
|
105
|
-
</
|
|
106
|
-
</
|
|
105
|
+
</AButton>
|
|
106
|
+
</ATooltip>
|
|
107
107
|
|
|
108
108
|
<!-- 分隔线 -->
|
|
109
109
|
<div class="toolbar-divider"></div>
|
|
110
110
|
|
|
111
111
|
<!-- 下载按钮 -->
|
|
112
|
-
<
|
|
112
|
+
<ATooltip
|
|
113
113
|
v-if="props.isDownload"
|
|
114
114
|
mini
|
|
115
115
|
position="bottom"
|
|
116
116
|
content="下载"
|
|
117
117
|
>
|
|
118
|
-
<
|
|
118
|
+
<AButton size="small" type="outline" @click="emit('download')">
|
|
119
119
|
<Download :size="16" />
|
|
120
|
-
</
|
|
121
|
-
</
|
|
120
|
+
</AButton>
|
|
121
|
+
</ATooltip>
|
|
122
122
|
|
|
123
123
|
<!-- 分隔线（仅在显示下载按钮时显示） -->
|
|
124
124
|
<div v-if="props.isDownload" class="toolbar-divider"></div>
|
|
125
125
|
|
|
126
126
|
<!-- 全屏按钮 -->
|
|
127
|
-
<
|
|
127
|
+
<ATooltip
|
|
128
128
|
mini
|
|
129
129
|
position="bottom"
|
|
130
130
|
:content="isFullscreen ? '退出全屏' : '全屏查看'"
|
|
131
131
|
>
|
|
132
|
-
<
|
|
132
|
+
<AButton size="small" type="outline" @click="toggleFullscreen">
|
|
133
133
|
<Maximize2 v-if="!isFullscreen" :size="15" />
|
|
134
134
|
<Minimize2 v-else :size="15" />
|
|
135
|
-
</
|
|
136
|
-
</
|
|
135
|
+
</AButton>
|
|
136
|
+
</ATooltip>
|
|
137
137
|
</div>
|
|
138
138
|
</div>
|
|
139
139
|
|
|
@@ -152,28 +152,28 @@
|
|
|
152
152
|
:class="{ 'toc-tab-item-active': activeTab === 'toc' }"
|
|
153
153
|
@click="activeTab = 'toc'"
|
|
154
154
|
>
|
|
155
|
-
<
|
|
155
|
+
<ATooltip
|
|
156
156
|
class="ai-chat-tooltip"
|
|
157
157
|
mini
|
|
158
158
|
position="top"
|
|
159
159
|
content="目录"
|
|
160
160
|
>
|
|
161
161
|
<FileText :size="16" />
|
|
162
|
-
</
|
|
162
|
+
</ATooltip>
|
|
163
163
|
</div>
|
|
164
164
|
<div
|
|
165
165
|
class="toc-tab-item"
|
|
166
166
|
:class="{ 'toc-tab-item-active': activeTab === 'seal' }"
|
|
167
167
|
@click="activeTab = 'seal'"
|
|
168
168
|
>
|
|
169
|
-
<
|
|
169
|
+
<ATooltip
|
|
170
170
|
class="ai-chat-tooltip"
|
|
171
171
|
mini
|
|
172
172
|
position="top"
|
|
173
173
|
content="印章"
|
|
174
174
|
>
|
|
175
175
|
<Stamp :size="16" />
|
|
176
|
-
</
|
|
176
|
+
</ATooltip>
|
|
177
177
|
</div>
|
|
178
178
|
</div>
|
|
179
179
|
<div class="toc-sidebar-content">
|
|
@@ -301,7 +301,13 @@ import {
|
|
|
301
301
|
Download,
|
|
302
302
|
RefreshCcw,
|
|
303
303
|
} from "lucide-vue-next";
|
|
304
|
-
import {
|
|
304
|
+
import {
|
|
305
|
+
Message,
|
|
306
|
+
Button as AButton,
|
|
307
|
+
Tooltip as ATooltip,
|
|
308
|
+
Dropdown as ADropdown,
|
|
309
|
+
Option as ADoption,
|
|
310
|
+
} from "@arco-design/web-vue";
|
|
305
311
|
|
|
306
312
|
// 定义组件名称
|
|
307
313
|
defineOptions({
|
|
@@ -2120,11 +2126,6 @@ defineExpose({
|
|
|
2120
2126
|
// 跳转相关方法
|
|
2121
2127
|
goToPage, // 跳转到指定页面
|
|
2122
2128
|
jumpToPosition, // 跳转到指定位置并高亮（统一接口，自动识别类型）
|
|
2123
|
-
// 向后兼容的别名方法（内部调用统一接口）
|
|
2124
|
-
jumpToBlockPosition: (pageNum: number, bbox: [number, number, number, number], emitEvent?: boolean) =>
|
|
2125
|
-
jumpToPosition(pageNum, bbox, emitEvent),
|
|
2126
|
-
jumpToSealPosition: (pageNum: number, bbox: [number, number, number, number], emitEvent?: boolean) =>
|
|
2127
|
-
jumpToPosition(pageNum, bbox, emitEvent),
|
|
2128
2129
|
// 获取当前状态
|
|
2129
2130
|
getCurrentPage: () => currentPage.value, // 获取当前页码
|
|
2130
2131
|
getTotalPages: () => totalPages.value, // 获取总页数
|
package/preview/docxPreview.vue
CHANGED
|
@@ -4,26 +4,26 @@
|
|
|
4
4
|
v-if="isLoading"
|
|
5
5
|
class="preview-loading-overlay"
|
|
6
6
|
>
|
|
7
|
-
<
|
|
7
|
+
<ASpin size="large" />
|
|
8
8
|
<p class="preview-loading-title">正在加载文档...</p>
|
|
9
9
|
</div>
|
|
10
10
|
<!-- 工具栏 -->
|
|
11
11
|
<div class="preview-toolbar preview-toolbar-right">
|
|
12
12
|
<div class="toolbar-group">
|
|
13
|
-
<
|
|
13
|
+
<ATooltip
|
|
14
14
|
v-if="isDownload"
|
|
15
15
|
mini
|
|
16
16
|
position="bottom"
|
|
17
17
|
content="下载"
|
|
18
18
|
>
|
|
19
|
-
<
|
|
19
|
+
<AButton
|
|
20
20
|
size="small"
|
|
21
21
|
type="outline"
|
|
22
22
|
@click="emit('download')"
|
|
23
23
|
>
|
|
24
24
|
<Download :size="16" />
|
|
25
|
-
</
|
|
26
|
-
</
|
|
25
|
+
</AButton>
|
|
26
|
+
</ATooltip>
|
|
27
27
|
</div>
|
|
28
28
|
</div>
|
|
29
29
|
<!-- 文档容器 -->
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
import { renderAsync } from 'docx-preview';
|
|
37
37
|
import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
|
38
38
|
import { Download } from 'lucide-vue-next';
|
|
39
|
+
import { Button as AButton, Tooltip as ATooltip, Spin as ASpin } from '@arco-design/web-vue';
|
|
39
40
|
|
|
40
41
|
// 定义 props
|
|
41
42
|
const props = defineProps({
|
package/preview/index.vue
CHANGED
|
@@ -81,20 +81,20 @@
|
|
|
81
81
|
<!-- 不支持的文件类型 -->
|
|
82
82
|
<div v-else class="preview-empty-container">
|
|
83
83
|
<div class="preview-empty-message">{{ unsupportedMessage }}</div>
|
|
84
|
-
<
|
|
84
|
+
<AButton
|
|
85
85
|
v-if="downloadUrl"
|
|
86
86
|
type="primary"
|
|
87
87
|
@click="handleDownload"
|
|
88
88
|
>
|
|
89
89
|
点击下载文件
|
|
90
|
-
</
|
|
90
|
+
</AButton>
|
|
91
91
|
</div>
|
|
92
92
|
</div>
|
|
93
93
|
</template>
|
|
94
94
|
|
|
95
95
|
<script setup>
|
|
96
96
|
import { ref, onBeforeUnmount } from 'vue';
|
|
97
|
-
import { Message } from '@arco-design/web-vue';
|
|
97
|
+
import { Message, Button as AButton } from '@arco-design/web-vue';
|
|
98
98
|
import ImagePreview from './ImagePreview.vue';
|
|
99
99
|
import PdfPreview from './PdfPreview.vue';
|
|
100
100
|
import TifPreview from './tifPreview.vue';
|
|
@@ -300,10 +300,47 @@ const handleOriginal = () => {
|
|
|
300
300
|
}
|
|
301
301
|
};
|
|
302
302
|
|
|
303
|
+
// 获取当前活动的预览组件引用
|
|
304
|
+
const getCurrentPreviewRef = () => {
|
|
305
|
+
switch (fileType.value) {
|
|
306
|
+
case 'pdf':
|
|
307
|
+
return pdfPreviewRef.value;
|
|
308
|
+
case 'image':
|
|
309
|
+
return imagePreviewRef.value;
|
|
310
|
+
case 'tif':
|
|
311
|
+
return tifPreviewRef.value;
|
|
312
|
+
case 'docx':
|
|
313
|
+
return docxPreviewRef.value;
|
|
314
|
+
case 'ofd':
|
|
315
|
+
return ofdPreviewRef.value;
|
|
316
|
+
case 'xlsx':
|
|
317
|
+
return xlsxPreviewRef.value;
|
|
318
|
+
default:
|
|
319
|
+
return null;
|
|
320
|
+
}
|
|
321
|
+
};
|
|
322
|
+
|
|
303
323
|
// 暴露方法给父组件
|
|
304
324
|
defineExpose({
|
|
305
325
|
preview,
|
|
306
|
-
clearPreview
|
|
326
|
+
clearPreview,
|
|
327
|
+
// 子组件引用（方便直接访问子组件的方法）
|
|
328
|
+
getPdfPreview: () => pdfPreviewRef.value,
|
|
329
|
+
getImagePreview: () => imagePreviewRef.value,
|
|
330
|
+
getTifPreview: () => tifPreviewRef.value,
|
|
331
|
+
getDocxPreview: () => docxPreviewRef.value,
|
|
332
|
+
getOfdPreview: () => ofdPreviewRef.value,
|
|
333
|
+
getXlsxPreview: () => xlsxPreviewRef.value,
|
|
334
|
+
// 获取当前活动的预览组件
|
|
335
|
+
getCurrentPreview: getCurrentPreviewRef,
|
|
336
|
+
// PDF 预览的代理方法（方便使用）
|
|
337
|
+
goToPage: (pageNum) => pdfPreviewRef.value?.goToPage(pageNum),
|
|
338
|
+
jumpToPosition: (pageNum, bbox, emitEvent) => pdfPreviewRef.value?.jumpToPosition(pageNum, bbox, emitEvent),
|
|
339
|
+
getCurrentPage: () => pdfPreviewRef.value?.getCurrentPage(),
|
|
340
|
+
getTotalPages: () => pdfPreviewRef.value?.getTotalPages(),
|
|
341
|
+
// 图片预览的代理方法
|
|
342
|
+
resetImage: () => imagePreviewRef.value?.reset(),
|
|
343
|
+
resetTif: () => tifPreviewRef.value?.reset(),
|
|
307
344
|
});
|
|
308
345
|
|
|
309
346
|
// 组件销毁时清理资源
|
package/preview/ofdPreview.vue
CHANGED
|
@@ -3,19 +3,19 @@
|
|
|
3
3
|
<!-- 工具栏 -->
|
|
4
4
|
<div v-if="props.isDownload" class="preview-toolbar preview-toolbar-right">
|
|
5
5
|
<div class="toolbar-group">
|
|
6
|
-
<
|
|
6
|
+
<ATooltip
|
|
7
7
|
mini
|
|
8
8
|
position="bottom"
|
|
9
9
|
content="下载"
|
|
10
10
|
>
|
|
11
|
-
<
|
|
11
|
+
<AButton
|
|
12
12
|
size="small"
|
|
13
13
|
type="outline"
|
|
14
14
|
@click="emit('download')"
|
|
15
15
|
>
|
|
16
16
|
<Download :size="16" />
|
|
17
|
-
</
|
|
18
|
-
</
|
|
17
|
+
</AButton>
|
|
18
|
+
</ATooltip>
|
|
19
19
|
</div>
|
|
20
20
|
</div>
|
|
21
21
|
<OfdView
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
import { ref, watch, onMounted } from 'vue';
|
|
32
32
|
import { OfdView } from 'bestofdview';
|
|
33
33
|
import 'bestofdview/dist/style.css';
|
|
34
|
-
import { Message } from '@arco-design/web-vue';
|
|
34
|
+
import { Message, Button as AButton, Tooltip as ATooltip } from '@arco-design/web-vue';
|
|
35
35
|
import { Download } from 'lucide-vue-next';
|
|
36
36
|
|
|
37
37
|
const props = defineProps({
|
package/preview/tifPreview.vue
CHANGED
|
@@ -14,82 +14,82 @@
|
|
|
14
14
|
{{ Math.round(scale * 100) }}%
|
|
15
15
|
</span>
|
|
16
16
|
<div class="toolbar-divider"></div>
|
|
17
|
-
<
|
|
18
|
-
<
|
|
17
|
+
<ATooltip mini position="bottom" content="重置">
|
|
18
|
+
<AButton
|
|
19
19
|
size="small"
|
|
20
20
|
type="outline"
|
|
21
21
|
@click="reset"
|
|
22
22
|
>
|
|
23
23
|
<RefreshCcw :size="16" />
|
|
24
|
-
</
|
|
25
|
-
</
|
|
26
|
-
<
|
|
24
|
+
</AButton>
|
|
25
|
+
</ATooltip>
|
|
26
|
+
<ATooltip
|
|
27
27
|
v-if="originalId"
|
|
28
28
|
mini
|
|
29
29
|
position="bottom"
|
|
30
30
|
content="查看原图"
|
|
31
31
|
>
|
|
32
|
-
<
|
|
32
|
+
<AButton
|
|
33
33
|
size="small"
|
|
34
34
|
type="outline"
|
|
35
35
|
@click="original"
|
|
36
36
|
>
|
|
37
37
|
<Maximize2 :size="16" />
|
|
38
|
-
</
|
|
39
|
-
</
|
|
40
|
-
<
|
|
41
|
-
<
|
|
38
|
+
</AButton>
|
|
39
|
+
</ATooltip>
|
|
40
|
+
<ATooltip mini position="bottom" content="缩小">
|
|
41
|
+
<AButton
|
|
42
42
|
size="small"
|
|
43
43
|
type="outline"
|
|
44
44
|
:disabled="scale <= minScale"
|
|
45
45
|
@click="zoom(-0.1)"
|
|
46
46
|
>
|
|
47
47
|
<ZoomOut :size="16" />
|
|
48
|
-
</
|
|
49
|
-
</
|
|
50
|
-
<
|
|
51
|
-
<
|
|
48
|
+
</AButton>
|
|
49
|
+
</ATooltip>
|
|
50
|
+
<ATooltip mini position="bottom" content="放大">
|
|
51
|
+
<AButton
|
|
52
52
|
size="small"
|
|
53
53
|
type="outline"
|
|
54
54
|
:disabled="scale >= maxScale"
|
|
55
55
|
@click="zoom(0.1)"
|
|
56
56
|
>
|
|
57
57
|
<ZoomIn :size="16" />
|
|
58
|
-
</
|
|
59
|
-
</
|
|
60
|
-
<
|
|
58
|
+
</AButton>
|
|
59
|
+
</ATooltip>
|
|
60
|
+
<ATooltip
|
|
61
61
|
v-if="isDownload"
|
|
62
62
|
mini
|
|
63
63
|
position="bottom"
|
|
64
64
|
content="下载"
|
|
65
65
|
>
|
|
66
|
-
<
|
|
66
|
+
<AButton
|
|
67
67
|
size="small"
|
|
68
68
|
type="outline"
|
|
69
69
|
@click="emit('download')"
|
|
70
70
|
>
|
|
71
71
|
<Download :size="16" />
|
|
72
|
-
</
|
|
73
|
-
</
|
|
72
|
+
</AButton>
|
|
73
|
+
</ATooltip>
|
|
74
74
|
<div class="toolbar-divider"></div>
|
|
75
|
-
<
|
|
76
|
-
<
|
|
75
|
+
<ATooltip mini position="bottom" content="向左旋转">
|
|
76
|
+
<AButton
|
|
77
77
|
size="small"
|
|
78
78
|
type="outline"
|
|
79
79
|
@click="rotateImage('left')"
|
|
80
80
|
>
|
|
81
81
|
<RotateCw :size="16" />
|
|
82
|
-
</
|
|
83
|
-
</
|
|
84
|
-
<
|
|
85
|
-
<
|
|
82
|
+
</AButton>
|
|
83
|
+
</ATooltip>
|
|
84
|
+
<ATooltip mini position="bottom" content="向右旋转">
|
|
85
|
+
<AButton
|
|
86
86
|
size="small"
|
|
87
87
|
type="outline"
|
|
88
88
|
@click="rotateImage('right')"
|
|
89
89
|
>
|
|
90
90
|
<RotateCcw :size="16" />
|
|
91
|
-
</
|
|
92
|
-
</
|
|
91
|
+
</AButton>
|
|
92
|
+
</ATooltip>
|
|
93
93
|
</div>
|
|
94
94
|
</div>
|
|
95
95
|
|
|
@@ -122,7 +122,8 @@
|
|
|
122
122
|
|
|
123
123
|
<script setup>
|
|
124
124
|
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
|
|
125
|
-
import { ZoomIn, ZoomOut, RefreshCcw, RotateCw, Download, Maximize2 } from 'lucide-vue-next';
|
|
125
|
+
import { ZoomIn, ZoomOut, RefreshCcw, RotateCw, RotateCcw, Download, Maximize2 } from 'lucide-vue-next';
|
|
126
|
+
import { Button as AButton, Tooltip as ATooltip } from '@arco-design/web-vue';
|
|
126
127
|
|
|
127
128
|
const props = defineProps({
|
|
128
129
|
url: {
|
package/preview/xlsxPreview.vue
CHANGED
|
@@ -7,49 +7,49 @@
|
|
|
7
7
|
{{ Math.round(scale * 100) }}%
|
|
8
8
|
</span>
|
|
9
9
|
<div class="toolbar-divider"></div>
|
|
10
|
-
<
|
|
11
|
-
<
|
|
10
|
+
<ATooltip mini position="bottom" content="重置">
|
|
11
|
+
<AButton
|
|
12
12
|
size="small"
|
|
13
13
|
type="outline"
|
|
14
14
|
@click="reset"
|
|
15
15
|
>
|
|
16
16
|
<RefreshCcw :size="16" />
|
|
17
|
-
</
|
|
18
|
-
</
|
|
19
|
-
<
|
|
20
|
-
<
|
|
17
|
+
</AButton>
|
|
18
|
+
</ATooltip>
|
|
19
|
+
<ATooltip mini position="bottom" content="缩小">
|
|
20
|
+
<AButton
|
|
21
21
|
size="small"
|
|
22
22
|
type="outline"
|
|
23
23
|
:disabled="scale <= 0.5"
|
|
24
24
|
@click="zoom(-0.1)"
|
|
25
25
|
>
|
|
26
26
|
<ZoomOut :size="16" />
|
|
27
|
-
</
|
|
28
|
-
</
|
|
29
|
-
<
|
|
30
|
-
<
|
|
27
|
+
</AButton>
|
|
28
|
+
</ATooltip>
|
|
29
|
+
<ATooltip mini position="bottom" content="放大">
|
|
30
|
+
<AButton
|
|
31
31
|
size="small"
|
|
32
32
|
type="outline"
|
|
33
33
|
:disabled="scale >= 2"
|
|
34
34
|
@click="zoom(0.1)"
|
|
35
35
|
>
|
|
36
36
|
<ZoomIn :size="16" />
|
|
37
|
-
</
|
|
38
|
-
</
|
|
39
|
-
<
|
|
37
|
+
</AButton>
|
|
38
|
+
</ATooltip>
|
|
39
|
+
<ATooltip
|
|
40
40
|
v-if="isDownload"
|
|
41
41
|
mini
|
|
42
42
|
position="bottom"
|
|
43
43
|
content="下载"
|
|
44
44
|
>
|
|
45
|
-
<
|
|
45
|
+
<AButton
|
|
46
46
|
size="small"
|
|
47
47
|
type="outline"
|
|
48
48
|
@click="emit('download')"
|
|
49
49
|
>
|
|
50
50
|
<Download :size="16" />
|
|
51
|
-
</
|
|
52
|
-
</
|
|
51
|
+
</AButton>
|
|
52
|
+
</ATooltip>
|
|
53
53
|
</div>
|
|
54
54
|
</div>
|
|
55
55
|
<div
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
|
|
70
70
|
<script setup>
|
|
71
71
|
import { ref, watch } from 'vue';
|
|
72
|
-
import { Message } from '@arco-design/web-vue';
|
|
72
|
+
import { Message, Button as AButton, Tooltip as ATooltip } from '@arco-design/web-vue';
|
|
73
73
|
import { ZoomIn, ZoomOut, RefreshCcw, Download } from 'lucide-vue-next';
|
|
74
74
|
import VueOfficeExcel from '@vue-office/excel/lib/v3/index';
|
|
75
75
|
import '@vue-office/excel/lib/v3/index.css';
|