144 lines
4.4 KiB
Vue
144 lines
4.4 KiB
Vue
<template>
|
|
<div>
|
|
<a-button type="text" size="small" @click="show = true">查看</a-button>
|
|
<a-drawer
|
|
:mask-closable="false"
|
|
:header="false"
|
|
width="80%"
|
|
v-model:visible="show"
|
|
>
|
|
<div v-if="file">
|
|
<div class="font-18 bold">{{ file.fileName }}</div>
|
|
<a-divider />
|
|
<div>
|
|
<iframe
|
|
v-if="file.suffix === '.pdf'"
|
|
style="width: 100%; height: 100vh"
|
|
:src="`/api/file/` + file.id"
|
|
>
|
|
</iframe>
|
|
<vue-office-docx
|
|
v-else-if="['.docx'].includes(file.suffix)"
|
|
:src="`/api/file/` + file.id"
|
|
style="width: 100%; height: 100vh"
|
|
/>
|
|
<vue-office-excel
|
|
v-else-if="['.xlsx', '.xls'].includes(file.suffix)"
|
|
:src="`/api/file/` + file.id"
|
|
style="width: 100%; height: 100vh"
|
|
/>
|
|
<div v-else-if="file.fileType.indexOf('image') > -1">
|
|
<a-image
|
|
:src="`/api/file/` + file.id"
|
|
:fit="'contain'"
|
|
height="960px"
|
|
width="100%"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="flex flex-center flex-col"
|
|
style="margin-top: 20%"
|
|
>
|
|
<a-button
|
|
type="primary"
|
|
status="danger"
|
|
@click="download"
|
|
>立即下载
|
|
</a-button>
|
|
<div class="grey-6 mt-20">
|
|
该类型的文件不支持在线预览，请点击 立即下载
|
|
后使用对应软件查看
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-center flex-col"
|
|
v-else
|
|
style="margin-top: 20%"
|
|
>
|
|
<icon-loading :size="32" />
|
|
<div class="mt-20">加载中，请稍后</div>
|
|
</div>
|
|
<template #footer>
|
|
<div>
|
|
<a-button type="primary" @click="download">下载</a-button>
|
|
</div>
|
|
</template>
|
|
</a-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
//引入VueOfficeDocx组件
|
|
import VueOfficeDocx from '@vue-office/docx'
|
|
//引入相关样式
|
|
import '@vue-office/docx/lib/index.css'
|
|
//引入VueOfficeExcel组件
|
|
import VueOfficeExcel from '@vue-office/excel'
|
|
//引入相关样式
|
|
import '@vue-office/excel/lib/index.css'
|
|
|
|
export default {
|
|
components: {
|
|
VueOfficeDocx,
|
|
VueOfficeExcel
|
|
},
|
|
props: {
|
|
fileId: {
|
|
required: true,
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
watch: {
|
|
show: {
|
|
handler(val) {
|
|
if (val) {
|
|
this.fetchFile()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
file: null
|
|
}
|
|
},
|
|
methods: {
|
|
fetchFile() {
|
|
this.$api.file.info(this.fileId).then(res => {
|
|
if (res.code === 200) {
|
|
this.file = res.data
|
|
}
|
|
})
|
|
},
|
|
download() {
|
|
this.$api.file.download({ fileId: this.file.id }).then(res => {
|
|
if (res.hasOwnProperty('code')) {
|
|
this.$message.error(res.msg)
|
|
return
|
|
}
|
|
this.downloadFile(res)
|
|
})
|
|
},
|
|
downloadFile(res) {
|
|
const url = window.URL.createObjectURL(new Blob([res]))
|
|
const link = document.createElement('a')
|
|
link.style.display = 'none'
|
|
link.href = url
|
|
const excelName = this.file.fileName
|
|
link.setAttribute('download', excelName)
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
link.remove()
|
|
this.$notification.success('下载成功')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|