@ganwei-web/gw-base-components-plus 1.0.52 → 1.0.54
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/file-preview/filePreview.vue +105 -0
- package/package.json +1 -1
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<span class="file-preview">
|
|
3
|
+
<span class="file-name">{{ filename }}</span>
|
|
4
|
+
<el-button v-if="isPreview" type="primary" link @click="handlePreview">
|
|
5
|
+
预览
|
|
6
|
+
</el-button>
|
|
7
|
+
<el-button v-if="isDownload" type="primary" link @click="handleDownload">
|
|
8
|
+
下载
|
|
9
|
+
</el-button>
|
|
10
|
+
</span>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script setup>
|
|
14
|
+
import { computed } from 'vue'
|
|
15
|
+
import 'js-base64'
|
|
16
|
+
|
|
17
|
+
const Base64 = window.Base64
|
|
18
|
+
|
|
19
|
+
const props = defineProps({
|
|
20
|
+
// 文件地址
|
|
21
|
+
url: {
|
|
22
|
+
type: String,
|
|
23
|
+
required: true
|
|
24
|
+
},
|
|
25
|
+
// 文件地址的域名前缀，未传入时默认使用当前站点 origin
|
|
26
|
+
fileDomain: {
|
|
27
|
+
type: String,
|
|
28
|
+
default: ''
|
|
29
|
+
},
|
|
30
|
+
// 是否显示预览按钮
|
|
31
|
+
isPreview: {
|
|
32
|
+
type: Boolean,
|
|
33
|
+
default: false
|
|
34
|
+
},
|
|
35
|
+
// 是否显示下载按钮
|
|
36
|
+
isDownload: {
|
|
37
|
+
type: Boolean,
|
|
38
|
+
default: false
|
|
39
|
+
}
|
|
40
|
+
})
|
|
41
|
+
|
|
42
|
+
// 从 url 中截取文件名
|
|
43
|
+
const filename = computed(() => {
|
|
44
|
+
const value = props.url || ''
|
|
45
|
+
const raw = value.substring(value.lastIndexOf('/') + 1).split('?')[0]
|
|
46
|
+
try {
|
|
47
|
+
return decodeURIComponent(raw)
|
|
48
|
+
} catch (e) {
|
|
49
|
+
return raw
|
|
50
|
+
}
|
|
51
|
+
})
|
|
52
|
+
|
|
53
|
+
// 从 localStorage.webConfig 读取预览服务域名
|
|
54
|
+
function getPreviewDomain() {
|
|
55
|
+
try {
|
|
56
|
+
const webConfig = JSON.parse(localStorage.getItem('webConfig') || '{}')
|
|
57
|
+
return webConfig?.httpConfig?.configPreviewDomain || ''
|
|
58
|
+
} catch (e) {
|
|
59
|
+
return ''
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// 预览：使用预览服务器打开文件
|
|
64
|
+
function handlePreview() {
|
|
65
|
+
const domain = getPreviewDomain().replace(/\/+$/, '') || ""
|
|
66
|
+
if (!domain) {
|
|
67
|
+
console.warn('[file-preview] 未配置预览服务域名')
|
|
68
|
+
return
|
|
69
|
+
}
|
|
70
|
+
// 文件地址需带上域名：优先使用外部传入的域名，否则使用当前站点 origin
|
|
71
|
+
const fileDomain = (props.fileDomain || window.location.origin).replace(/\/+$/, '')
|
|
72
|
+
const fileUrl = /^https?:\/\//i.test(props.url)
|
|
73
|
+
? props.url
|
|
74
|
+
: `${fileDomain}/${String(props.url).replace(/^\/+/, '')}`
|
|
75
|
+
console.log('fileUrl', fileUrl)
|
|
76
|
+
const previewUrl = `${domain}/onlinePreview?url=${encodeURIComponent(Base64.encode(fileUrl))}`
|
|
77
|
+
window.open(previewUrl)
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// 下载
|
|
81
|
+
function handleDownload() {
|
|
82
|
+
const link = document.createElement('a')
|
|
83
|
+
link.href = props.url
|
|
84
|
+
link.download = filename.value
|
|
85
|
+
document.body.appendChild(link)
|
|
86
|
+
link.click()
|
|
87
|
+
document.body.removeChild(link)
|
|
88
|
+
}
|
|
89
|
+
</script>
|
|
90
|
+
|
|
91
|
+
<style scoped>
|
|
92
|
+
.file-preview {
|
|
93
|
+
display: inline-flex;
|
|
94
|
+
align-items: center;
|
|
95
|
+
gap: 4px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.file-name {
|
|
99
|
+
overflow: hidden;
|
|
100
|
+
text-overflow: ellipsis;
|
|
101
|
+
white-space: nowrap;
|
|
102
|
+
max-width: 200px;
|
|
103
|
+
margin-right: 12px;
|
|
104
|
+
}
|
|
105
|
+
</style>
|