js-kompo-utils 1.0.40 → 1.0.41
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/components/VlDocxPreview.vue +98 -0
- package/package.json +2 -1
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
v-if="!$_displayNone"
|
|
4
|
+
v-show="!$_hidden"
|
|
5
|
+
v-bind="$_attributes"
|
|
6
|
+
class="vl-docx-preview"
|
|
7
|
+
>
|
|
8
|
+
<div v-if="loading" class="vl-docx-preview__status">
|
|
9
|
+
<span class="vl-docx-preview__spinner" aria-hidden="true"></span>
|
|
10
|
+
</div>
|
|
11
|
+
<div v-else-if="failed" class="vl-docx-preview__status">{{ fallbackLabel }}</div>
|
|
12
|
+
<div v-show="!loading && !failed" ref="document"></div>
|
|
13
|
+
</div>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script>
|
|
17
|
+
import Other from 'vue-kompo/js/form/mixins/Other'
|
|
18
|
+
|
|
19
|
+
export default {
|
|
20
|
+
mixins: [Other],
|
|
21
|
+
data() {
|
|
22
|
+
return {
|
|
23
|
+
loading: true,
|
|
24
|
+
failed: false,
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
computed: {
|
|
28
|
+
url() { return this.$_config('url') },
|
|
29
|
+
fallbackLabel() { return this.$_config('fallbackLabel') || 'No preview available' },
|
|
30
|
+
},
|
|
31
|
+
methods: {
|
|
32
|
+
async renderDocument() {
|
|
33
|
+
try {
|
|
34
|
+
const { renderAsync } = await import('docx-preview')
|
|
35
|
+
const response = await fetch(this.url, { credentials: 'same-origin' })
|
|
36
|
+
|
|
37
|
+
if (!response.ok) throw new Error(`HTTP ${response.status}`)
|
|
38
|
+
|
|
39
|
+
await renderAsync(await response.blob(), this.$refs.document)
|
|
40
|
+
} catch (e) {
|
|
41
|
+
// Legacy .doc and corrupt files are not zip archives and end up here.
|
|
42
|
+
this.failed = true
|
|
43
|
+
} finally {
|
|
44
|
+
this.loading = false
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
this.$nextTick(this.fitToWidth)
|
|
48
|
+
},
|
|
49
|
+
fitToWidth() {
|
|
50
|
+
const container = this.$refs.document
|
|
51
|
+
const wrapper = container && container.querySelector('.docx-wrapper')
|
|
52
|
+
const page = wrapper && wrapper.querySelector('section')
|
|
53
|
+
|
|
54
|
+
if (!page) return
|
|
55
|
+
|
|
56
|
+
wrapper.style.zoom = 1
|
|
57
|
+
|
|
58
|
+
const styles = getComputedStyle(wrapper)
|
|
59
|
+
const neededWidth = page.offsetWidth + parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight)
|
|
60
|
+
|
|
61
|
+
wrapper.style.zoom = Math.min(1, container.clientWidth / neededWidth)
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
mounted() {
|
|
65
|
+
this.renderDocument()
|
|
66
|
+
},
|
|
67
|
+
}
|
|
68
|
+
</script>
|
|
69
|
+
|
|
70
|
+
<style>
|
|
71
|
+
.vl-docx-preview {
|
|
72
|
+
overflow: auto;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.vl-docx-preview__status {
|
|
76
|
+
display: flex;
|
|
77
|
+
align-items: center;
|
|
78
|
+
justify-content: center;
|
|
79
|
+
height: 100%;
|
|
80
|
+
padding: 2rem 1rem;
|
|
81
|
+
color: #6b7280;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.vl-docx-preview__spinner {
|
|
85
|
+
width: 1.5rem;
|
|
86
|
+
height: 1.5rem;
|
|
87
|
+
border: 2px solid currentColor;
|
|
88
|
+
border-right-color: transparent;
|
|
89
|
+
border-radius: 9999px;
|
|
90
|
+
animation: vl-docx-preview-spin 0.65s linear infinite;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@keyframes vl-docx-preview-spin {
|
|
94
|
+
to {
|
|
95
|
+
transform: rotate(360deg);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "js-kompo-utils",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.41",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "app.js",
|
|
6
6
|
"scripts": {
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
"@floating-ui/dom": "^1.7.6",
|
|
15
15
|
"apexcharts": "^5.10.4",
|
|
16
16
|
"ckeditor5": "^44.3.0",
|
|
17
|
+
"docx-preview": "^0.4.1",
|
|
17
18
|
"gsap": "^3.14.2",
|
|
18
19
|
"highlight.js": "^11.11.1",
|
|
19
20
|
"html2canvas": "^1.4.1",
|