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