wangyifang
/
sstt-archives-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

预览

Browse Source
master
lion 10 months ago
parent aa4eb3d3da
commit e1b51fdfee
4 changed files with 192 additions and 33 deletions
Show Stats Download Patch File Download Diff File

6
package.json
Unescape View File

@ -16,12 +16,16 @@
"dependencies": {
"@smallwei/avue": "^2.9.15",
"@tinymce/tinymce-vue": "^3.0.1",
"@vue-office/docx": "^1.6.3",
"@vue-office/excel": "^1.7.14",
"@vue-office/pdf": "^2.0.10",
"@vue/composition-api": "^1.7.2",
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^1.0.2",
"af-table-column": "^1.0.3",
"avue-plugin-map": "^1.0.1",
"axios": "0.18.1",
"core-js": "3.6.5",
"core-js": "^3.6.5",
"echarts": "^4.2.1",
"element-ui": "2.15.13",
"file-saver": "^2.0.5",

111
src/components/viewFile/viewFile.vue
Unescape View File

@ -1,26 +1,34 @@
<template>
<template>
<el-dialog class="common-dialog" :fullscreen='isfullscreen' :title="title" :modal="false" top="10vh" :visible.sync="diaShow" @close="coloseDia"
:width="width">
<el-dialog class="common-dialog" :fullscreen='isfullscreen' :title="title" :modal="false" top="2vh"
:visible.sync="diaShow" @close="coloseDia" :width="width">
<div slot="title">
<span class="el-dialog__title">{{title}}</span>
<slot name="searchtype"></slot>
</div>
<div class="dialogConcent" style="max-height: 65vh !important;min-height: 300px;overflow: scroll;">
<div v-if="typeName=='file'">
<iframe id="iframeWin" :src="url" frameborder="0" scrolling="auto" align="center" class="iframeWeb">
</iframe>
<div class="dialogConcent" :style="{height:wheight+'px'}">
<div v-if="typeName=='file'" style="height:100%;overflow: scroll;">
<vue-office-docx v-if="urlType==='docx'" :src="url" @rendered="renderingCompleted"></vue-office-docx>
<vue-office-pdf v-else-if="urlType==='pdf'" :src="url" @rendered="renderingCompleted"></vue-office-pdf>
<vue-office-excel v-else-if="urlType==='excel'" :src="url" @rendered="renderingCompleted"></vue-office-excel>
<img v-else-if="urlType==='image'" :src="url" style="width:100%"></img>
<iframe v-else id="iframeWin" :src="url" frameborder="0" scrolling="auto" align="center" class="iframeWeb">
</iframe>
</div>
<div v-if="typeName=='video'" style="text-align: center;">
<video :src="url" controls></video>
<div v-if="typeName=='video'" style="text-align: center;">
<video :src="url" controls></video>
</div>
</div>
<div slot="footer" class="dialog-footer">
<div>
<el-button size="small" @click="coloseDia">关闭</el-button>
<div slot="footer" class="dialog-footer">
<div>
<el-button size="small" @click="coloseDia">关闭</el-button>
</div>
<slot name="footerbtn"></slot>
</div>
@ -29,7 +37,16 @@
</template>
<script>
import vueOfficeDocx from "@vue-office/docx"
import vueOfficeExcel from "@vue-office/excel"
import vueOfficePdf from "@vue-office/pdf"
import '@vue-office/docx/lib/index.css'
export default {
components: {
vueOfficeDocx,
vueOfficeExcel,
vueOfficePdf
},
props: {
title: {
type: String,
@ -37,7 +54,7 @@
},
width: {
type: String,
default: "70%"
default: "60%"
},
isShow: {
type: Boolean,
@ -52,40 +69,72 @@
},
data() {
return {
diaShow: this.isShow,
isfullscreen:false,
url:'',
typeName:'file',
diaShow: this.isShow,
isfullscreen: false,
baseUrl: `${process.env.VUE_APP_PREVIEW_API}?url=`,
wheight: "",
form:{
show:''
}
url: '',
wheight: "400",
form: {
show: ''
},
urlType: 'others',
typeName: 'file',
}
},
watch: {
isShow(val) {
this.diaShow = this.isShow;
},
},
url(val) {
console.log("url", val, this.typeName)
if (val) {
if (this.typeName === 'file') {
if (val.includes('docx') || val.includes('DOCX')) {
this.urlType = 'docx'
} else if (val.includes('pdf') || val.includes('PDF')) {
this.urlType = 'pdf'
} else if (val.includes('xls') || val.includes('xlsx') || val.includes('XLS') || val.includes('XLSX')) {
this.urlType = 'excel'
} else if (this.isImageUrl(val)) {
this.urlType = 'image'
} else {
this.urlType = 'others'
}
}
console.log('urltype', this.urlType)
}
}
},
methods: {
methods: {
renderingCompleted() {
console.log("渲染完成")
},
isImageUrl(url) {
// 定义常见的图片格式扩展名
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tiff', '.tif', '.webp', '.svg'];
// 将 URL 转换为小写，方便匹配
const lowerCaseUrl = url.toLowerCase();
// 检查 URL 是否以图片扩展名结尾
return imageExtensions.some(ext => lowerCaseUrl.endsWith(ext));
},
coloseDia() {
// this.url = ""
this.diaShow = false
this.url = ''
this.typeName = 'file'
this.url = ""
this.diaShow = false
this.typeName = 'file'
this.$emit('update:isShow', false)
}
}
}
</script>
<style scoped>
/deep/ .show{
flex-basis: 100%;
<style scoped>
/deep/ .show {
flex-basis: 100%;
}
.dialogConcent {
overflow-y: hidden;
}

100
src/components/viewFile/viewFile2.vue
Unescape View File

@ -0,0 +1,100 @@
<template>
<el-dialog class="common-dialog" :fullscreen='isfullscreen' :title="title" :modal="false" top="10vh" :visible.sync="diaShow" @close="coloseDia"
:width="width">
<div slot="title">
<span class="el-dialog__title">{{title}}</span>
<slot name="searchtype"></slot>
</div>
<div class="dialogConcent" style="max-height: 65vh !important;min-height: 300px;overflow: scroll;">
<div v-if="typeName=='file'">
<iframe id="iframeWin" :src="url" frameborder="0" scrolling="auto" align="center" class="iframeWeb">
</iframe>
</div>
<div v-if="typeName=='video'" style="text-align: center;">
<video :src="url" controls></video>
</div>
</div>
<div slot="footer" class="dialog-footer">
<div>
<el-button size="small" @click="coloseDia">关闭</el-button>
</div>
<slot name="footerbtn"></slot>
</div>
</el-dialog>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "文件预览"
},
width: {
type: String,
default: "70%"
},
isShow: {
type: Boolean,
default: () => {
return false
}
},
type: {
type: String,
default: "showinfo"
},
},
data() {
return {
diaShow: this.isShow,
isfullscreen:false,
url:'',
typeName:'file',
baseUrl: `${process.env.VUE_APP_PREVIEW_API}?url=`,
wheight: "",
form:{
show:''
}
}
},
watch: {
isShow(val) {
this.diaShow = this.isShow;
},
},
methods: {
coloseDia() {
// this.url = ""
this.diaShow = false
this.url = ''
this.typeName = 'file'
this.$emit('update:isShow', false)
}
}
}
</script>
<style scoped>
/deep/ .show{
flex-basis: 100%;
}
.dialogConcent {
overflow-y: hidden;
}
.iframeWeb {
text-align: center;
border: none;
display: block;
height: 100vh;
width: 100%;
}
</style>

8
src/views/record/components/showRecord.vue
Unescape View File

@ -87,7 +87,13 @@
this.$refs.viewFile.url = item.url
}else{
this.$refs.viewFile.typeName = 'file'
this.$refs.viewFile.url = item.view_url
if(item.url.includes('doc')||item.url.includes('DOC')){
this.$refs.viewFile.url = item.view_url
}else{
this.$refs.viewFile.url = item.url
}
}
this.$refs.viewFile.diaShow = true
},

Write Preview
Loading…
Cancel
Save