封装导出下载

2024-07-13 15:46:21 +08:00
parent 4ab5a2eee3
commit b32dee5886
10 changed files with 343 additions and 7 deletions
@@ -0,0 +1,102 @@
+<template>
+	<el-popover
+		placement="bottom-start"
+		title=""
+		trigger="click"
+		content=""
+		width="280"
+		:visible="exportVisible"
+	>
+		<template #reference>
+			<el-button v-bind="$attrs" :size="size" icon="sc-icon-Download" @click="exportClick">下载</el-button>
+		</template>
+		<template #default>
+			<div class="exportHeader">
+				<div class="name">{{info.type_desc}}</div>
+				<div class="status" v-if="info.status==0">{{info.msg}}</div>
+				<div class="finish" v-if="info.status==1"><i class="icon"><sc-icon-Finish/></i> 文件生成完成</div>
+			</div>
+			<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="info.rate" />
+		</template>
+	</el-popover>
+</template>
+
+<script>
+export default {
+	name: "index",
+	props:{
+		size:{ type: String, default: "small" },
+	},
+	data(){
+		return{
+			exportVisible:false,
+			info:{
+				name:"",
+				status:"",
+				rate:0,
+			}
+		}
+	},
+	mounted() {
+		// 获取新消息
+		this.$socketApi.getSock(this.getWsResult);
+	},
+	methods:{
+		getWsResult(res){
+			if(res.data && res.data.type == 6){
+				if(res.data.status == 0){
+					this.exportVisible = true;
+				}
+				this.info = res.data;
+				if(res.data.status==1){
+					this.exportVisible = false;
+					this.info = {};
+					this.down(res.data);
+				}
+			}
+		},
+		down(item){
+			const blob = new Blob([item.file_url]);
+			let fileName = item.type_desc+".xlsx";
+			if ('download' in document.createElement('a')) { // 非IE下载
+				let eLink = document.createElement('a');
+				eLink.download = fileName
+				eLink.style.display = 'none';
+				eLink.href = URL.createObjectURL(blob);
+				document.body.appendChild(eLink);
+				eLink.click();
+				URL.revokeObjectURL(eLink.href); // 释放URL 对象
+				document.body.removeChild(eLink);
+			} else { // IE10+下载
+				navigator.msSaveBlob(blob, fileName);
+			}
+		},
+		exportClick(){
+			if(this.exportVisible){
+				this.exportVisible = false;
+				return
+			}
+			this.$emit('exportData');
+		},
+	}
+}
+</script>
+
+<style scoped lang="scss">
+	.exportHeader{
+		font-size: 12px;
+		display: flex;align-items: center;justify-content: space-around;
+		margin-bottom: 6px;
+		.name{width: 60%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
+		.status{width: 40%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
+		.finish{
+			display: flex;align-items: center;justify-content: flex-end;color: var(--el-color-success);
+			.icon{width: 14px;height: 14px;margin-right: 4px;}
+		}
+	}
+	.exportPopover :deep(.el-progress-bar__innerText){
+		height: 100%;
+		display: flex;align-items: center;justify-content: flex-end;
+		font-size: 10px;
+	}
+</style>