1.导出
try {let response = null;response = await exportCheckAmendment({type: 2,reportId: row.id});if (response.size < 100) return ElMessage.warning("暂无修订件");// 处理请求返回的文件流const content = response as BlobPart;const blob = new Blob([content], {type: "application/msword;charset=UTF-8"});const extension = row.fileReportName.slice(row.fileReportName.lastIndexOf("."));const fileName = `${row.fileReportName}(修订件)${extension}`;const 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);document.body.removeChild(elink);} finally {// loading.value = false;}
2.下载(不携带token)
const link = document.createElement("a");link.href = url;link.setAttribute("download", "");document.body.appendChild(link);link.click();document.body.removeChild(link);
携带token
//这是请求的地址 (自定义)const param = {};const _herf = url;// 这是请求头中需要的token (自定义)const userInfo = JSON.parse(window.sessionStorage.getItem("user-info"));const token = userInfo.refreshToken;axios.post(`${_herf}`, param, {responseType: "blob",headers: {token,// 这是格式,看后段要不要你传 (自定义)ContentType: "application/json"}}).then(res => {const blob = res.data;const reader = new FileReader();reader.readAsDataURL(blob);reader.onload = e => {const a = document.createElement("a");a.download = "xlsName";a.href = e.target.result;document.body.appendChild(a);a.click();document.body.removeChild(a);};}).catch(err => {console.log(err.message);});
3.预览
const response = await getOverdueReportReview(row.id);if (!response) {loading.value = false;return;}const url = import.meta.env.VITE_PROXY_MONITOR;// 本地预览// window.open("http://localhost:8848/#/viewReport?id=" + row.id, "_blank");//线上环境window.open(url.replace(new RegExp(`/api`, "g"), "") +":8000/jkzx_dev/#/viewReport?id=" +row.id,"_blank");
4上传组件
<template><el-dialogv-model="dialogVisible":title="title"draggable:before-close="closeDialog":width="680"><el-form><!-- <el-form-item label="密级"><el-selectv-model="grading"placeholder="请选择密级":style="{ width: '150px' }"><el-optionv-for="item in gradingOptions":key="item.id":label="item.grading":value="item.id"/></el-select></el-form-item> --></el-form><el-upload:limit="1":on-exceed="handleExceed":on-change="handleChange":on-remove="handleRemove"dragaction=""ref="uploadRef"accept=".docx, .xlsx":auto-upload="false"><el-icon :size="58"><IconifyIconOffline icon="upload-filled" /></el-icon><div>拖拽文件到此 或 <span class="text-blue-400">点击上传</span></div></el-upload><template #footer><span class="dialog-footer"><el-button @click="closeDialog">取消</el-button><el-button :loading="loading" type="primary" @click="submitForm">确定</el-button></span></template></el-dialog>
</template><script setup lang="ts">
import { importCheckItem } from "@/api/report/overdueReport";import {ElMessage,genFileId,UploadInstance,UploadProps,UploadRawFile,UploadUserFile
} from "element-plus";
import { ref, watch } from "vue";const props = defineProps({title: {type: String,default: ""},type: {type: String,default: ""},rowData: {type: Object,default: () => {return {};}},visible: {type: Boolean,default: false}
});const grading = ref(4);const loading = ref(false);const emit = defineEmits(["update:visible", "submit"]);const dialogVisible = ref(false);watch(() => props.visible,val => {dialogVisible.value = val;}
);watch(dialogVisible, val => {emit("update:visible", val);
});const uploadRef = ref<UploadInstance>();const handleExceed: UploadProps["onExceed"] = files => {uploadRef.value!.clearFiles();const file = files[0] as UploadRawFile;file.uid = genFileId();uploadRef.value!.handleStart(file);
};const fileList = ref<UploadUserFile[]>([]);const handleChange: UploadProps["onChange"] = uploadFile => {fileList.value = [];fileList.value.push(uploadFile);
};const handleRemove: UploadProps["onRemove"] = () => {fileList.value = [];
};const submitForm = async () => {if (fileList.value.length === 0) {ElMessage.warning("请先上传文件");return;}loading.value = true;const formdata = new FormData();formdata.append("file", fileList.value[0].raw);try {// await importCheckItem(formdata, grading.value);await importCheckItem(props.rowData.id, {file: fileList.value[0].raw});} finally {loading.value = false;}emit("submit");ElMessage.success("操作成功");closeDialog();
};const closeDialog = () => {grading.value = 4;fileList.value = [];uploadRef.value!.clearFiles();dialogVisible.value = false;
};
</script>