From c71dc4c3abb3fcbbafc68b34e2bcb98cf0f8b346 Mon Sep 17 00:00:00 2001 From: zhouwenxuan <1175765986@qq.com> Date: 星期三, 13 十二月 2023 17:08:01 +0800 Subject: [PATCH] 图片引入问题 --- src/views/components/details.vue | 66 +++++++++++++++++++++++++++++++-- 1 files changed, 62 insertions(+), 4 deletions(-) diff --git a/src/views/components/details.vue b/src/views/components/details.vue index 985fbe8..7c82390 100644 --- a/src/views/components/details.vue +++ b/src/views/components/details.vue @@ -19,7 +19,12 @@ <div class="title">{{state.content.title}}</div> <el-divider border-style="dashed"/> <div class="time">更新时间:{{state.content.updateTime?state.content.updateTime:state.content.createTime}}</div> - <div v-html="state.content.content"></div> + <div class="ql-container ql-snow" style="border: none" > + <div class="ql-editor"> + <div v-html="state.content.content" class="reviewTable" @click="showFile($event)"></div> + </div> + </div> +<!-- <div v-html="state.content.content" class="reviewTable" @click="showFile($event)"></div>--> </div> <div class="main" v-if="state.firstClass == '法律法规'"> <div class="title">{{state.content.title}}</div> @@ -27,7 +32,12 @@ <div class="info"><span>法律法规类别:{{state.content.lawType}}</span><span>颁布机构:{{state.content.pubAgency}}</span><span>颁布日期:{{state.content.pubDate}}</span></div> <el-divider border-style="dashed"/> <div class="time">更新时间:{{state.content.updateTime?state.content.updateTime:state.content.createTime}}</div> - <div v-html="state.content.content"></div> + <div class="ql-container ql-snow" style="border: none" > + <div class="ql-editor"> + <div v-html="state.content.content" class="reviewTable" @click="showFile($event)"></div> + </div> + </div> +<!-- <div v-html="state.content.content" class="reviewTable" @click="showFile($event)"></div>--> </div> <div class="main" v-if="state.firstClass == '机构公示'"> <div class="title">{{state.content.name}}</div> @@ -83,6 +93,8 @@ import {ElMessage} from "element-plus"; import {getLawsDetails, getNoticeDetails, getPublishDetails} from "../../api/home/homePage"; import { getDict } from "@/api/login" +import axios from "axios"; +import {getToken} from "@/utils/auth"; const route = useRoute() const router = useRouter() @@ -94,7 +106,7 @@ }) const emit = defineEmits(['backJump']) onMounted(()=>{ - getBusiness() + // getBusiness() }) onUnmounted(()=>{ @@ -136,13 +148,45 @@ state.content.createTime = state.content.createTime.substring(0.,16) state.content.issueDate = state.content.issueDate.substring(0,10) state.content.validDate = state.content.validDate.substring(0,10) - state.content.business = getName(state.content.business) + state.content.business = state.content.businessNames.join() }else{ ElMessage.warning(res.message) } } } +const showFile = (e) => { + if(e.target.nodeName === 'A'){ + console.log("e",e) + e.preventDefault(); + const file = { + fileUrl: e.target.href, + fileName: e.target.download + } + axios.get( file.fileUrl,{ + headers: + { + 'Content-Type': 'application/json', + 'Authorization':getToken(), + }, + responseType: 'blob' + } + ).then(res=>{ + if (res) { + const link = document.createElement('a') + let blob = new Blob([res.data],{type: res.data.type}) + link.style.display = "none"; + link.href = URL.createObjectURL(blob); // 创建URL + link.setAttribute("download", file.fileName); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + } else { + this.$message.error('获取文件失败') + } + }) + } +} const back = ()=>{ if(state.firstClass == '通知公告'){ @@ -266,5 +310,19 @@ } } } + .reviewTable { + :deep(table){ + border: 1px solid #ccc; + text-align: center; + } + :deep(table td){ + border: 1px solid #ccc; + text-align: center; + padding: 0 5px; + } + :deep(table th){ + border: 1px solid #ccc; + } + } } </style> -- Gitblit v1.9.2