matrix_components 2.0.439 → 2.0.441
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 +1 -1
- package/dist/ComponentDemo/FormDemo.vue +1 -1
- package/dist/ComponentDemo/WordDemo.vue +191 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="demo-container">
|
|
3
|
+
<div class="control-panel">
|
|
4
|
+
<h3>Word 文档预览演示</h3>
|
|
5
|
+
|
|
6
|
+
<!-- 文件上传方式 -->
|
|
7
|
+
<div class="upload-section">
|
|
8
|
+
<h4>方式一：文件上传</h4>
|
|
9
|
+
<input
|
|
10
|
+
type="file"
|
|
11
|
+
@change="importWord(($event.target as any)?.files?.[0])"
|
|
12
|
+
accept=".docx"
|
|
13
|
+
/>
|
|
14
|
+
<button @click="clearFile" :disabled="!file">清除文件</button>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<!-- URL方式 -->
|
|
18
|
+
<div class="url-section">
|
|
19
|
+
<h4>方式二：URL地址</h4>
|
|
20
|
+
<input
|
|
21
|
+
v-model="wordUrl"
|
|
22
|
+
type="text"
|
|
23
|
+
placeholder="请输入Word文档的URL地址"
|
|
24
|
+
class="url-input"
|
|
25
|
+
/>
|
|
26
|
+
<button @click="loadFromUrl" :disabled="!wordUrl.trim()">加载URL</button>
|
|
27
|
+
<button @click="clearUrl" :disabled="!wordUrl">清除URL</button>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<!-- Word组件 -->
|
|
32
|
+
<div class="word-container">
|
|
33
|
+
<NsWord
|
|
34
|
+
v-if="counts"
|
|
35
|
+
ref="wordRef"
|
|
36
|
+
:url="currentUrl"
|
|
37
|
+
:hasTool="true"
|
|
38
|
+
:options="wordOptions">
|
|
39
|
+
</NsWord>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</template>
|
|
43
|
+
|
|
44
|
+
<script setup lang="ts">
|
|
45
|
+
import { ref, nextTick } from 'vue'
|
|
46
|
+
|
|
47
|
+
const counts = ref(true)
|
|
48
|
+
const file = ref()
|
|
49
|
+
const wordRef = ref()
|
|
50
|
+
const wordUrl = ref(
|
|
51
|
+
'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx',
|
|
52
|
+
)
|
|
53
|
+
const currentUrl = ref(wordUrl.value)
|
|
54
|
+
|
|
55
|
+
// Word文档配置选项
|
|
56
|
+
const wordOptions = ref({
|
|
57
|
+
// 可以在这里配置@vue-office/docx的选项
|
|
58
|
+
})
|
|
59
|
+
|
|
60
|
+
function importWord(f: any) {
|
|
61
|
+
// 清除URL，使用文件上传
|
|
62
|
+
wordUrl.value = ''
|
|
63
|
+
file.value = f
|
|
64
|
+
|
|
65
|
+
if (f && f.name.endsWith('.docx')) {
|
|
66
|
+
// 创建文件URL
|
|
67
|
+
const fileUrl = URL.createObjectURL(f)
|
|
68
|
+
currentUrl.value = fileUrl
|
|
69
|
+
} else if (f) {
|
|
70
|
+
alert('请选择DOCX文件')
|
|
71
|
+
clearFile()
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
function loadFromUrl() {
|
|
76
|
+
if (wordUrl.value.trim()) {
|
|
77
|
+
// 清除文件，使用URL
|
|
78
|
+
clearFile()
|
|
79
|
+
currentUrl.value = wordUrl.value.trim()
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
function clearFile() {
|
|
84
|
+
file.value = null
|
|
85
|
+
if (currentUrl.value.startsWith('blob:')) {
|
|
86
|
+
URL.revokeObjectURL(currentUrl.value)
|
|
87
|
+
}
|
|
88
|
+
currentUrl.value = ''
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
function clearUrl() {
|
|
92
|
+
wordUrl.value = ''
|
|
93
|
+
currentUrl.value = ''
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// 重新加载组件
|
|
97
|
+
function reloadComponent() {
|
|
98
|
+
counts.value = false
|
|
99
|
+
nextTick(() => {
|
|
100
|
+
counts.value = true
|
|
101
|
+
})
|
|
102
|
+
}
|
|
103
|
+
</script>
|
|
104
|
+
|
|
105
|
+
<style scoped lang="scss">
|
|
106
|
+
.demo-container {
|
|
107
|
+
padding: 20px;
|
|
108
|
+
max-width: 1400px;
|
|
109
|
+
margin: 0 auto;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.control-panel {
|
|
113
|
+
background: #f5f5f5;
|
|
114
|
+
padding: 20px;
|
|
115
|
+
border-radius: 8px;
|
|
116
|
+
margin-bottom: 20px;
|
|
117
|
+
|
|
118
|
+
h3 {
|
|
119
|
+
margin: 0 0 20px 0;
|
|
120
|
+
color: #333;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
h4 {
|
|
124
|
+
margin: 15px 0 10px 0;
|
|
125
|
+
color: #666;
|
|
126
|
+
font-size: 14px;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.upload-section,
|
|
131
|
+
.url-section {
|
|
132
|
+
margin-bottom: 20px;
|
|
133
|
+
padding: 15px;
|
|
134
|
+
background: white;
|
|
135
|
+
border-radius: 6px;
|
|
136
|
+
border: 1px solid #e0e0e0;
|
|
137
|
+
|
|
138
|
+
input[type='file'] {
|
|
139
|
+
margin-right: 10px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.url-input {
|
|
143
|
+
width: 300px;
|
|
144
|
+
padding: 8px 12px;
|
|
145
|
+
border: 1px solid #ddd;
|
|
146
|
+
border-radius: 4px;
|
|
147
|
+
margin-right: 10px;
|
|
148
|
+
font-size: 14px;
|
|
149
|
+
|
|
150
|
+
&:focus {
|
|
151
|
+
outline: none;
|
|
152
|
+
border-color: #409eff;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
button {
|
|
157
|
+
padding: 8px 16px;
|
|
158
|
+
background: #409eff;
|
|
159
|
+
color: white;
|
|
160
|
+
border: none;
|
|
161
|
+
border-radius: 4px;
|
|
162
|
+
cursor: pointer;
|
|
163
|
+
margin-right: 10px;
|
|
164
|
+
font-size: 14px;
|
|
165
|
+
|
|
166
|
+
&:hover:not(:disabled) {
|
|
167
|
+
background: #337ecc;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
&:disabled {
|
|
171
|
+
background: #c0c4cc;
|
|
172
|
+
cursor: not-allowed;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.word-container {
|
|
178
|
+
height: 600px;
|
|
179
|
+
border: 1px solid #e0e0e0;
|
|
180
|
+
border-radius: 8px;
|
|
181
|
+
overflow: hidden;
|
|
182
|
+
margin-bottom: 20px;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
@media (max-width: 768px) {
|
|
186
|
+
.url-input {
|
|
187
|
+
width: 100% !important;
|
|
188
|
+
margin-bottom: 10px;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
</style>
|