vue3导出,下载,预览,上传

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/56696.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习—学习率的选择

如果你选择适当的学习率&#xff0c;你的学习算法将运行得更好&#xff0c;如果太小&#xff0c;它会跑得很慢&#xff0c;如果太大&#xff0c;它甚至可能不会收敛&#xff0c;那么如何为模型选择一个好的学习率呢&#xff1f; 如果绘制多次迭代的成本&#xff0c;注意到成本…

vue3中用axios请求怎么添加cookie

在 Vue 3 中使用 axios 发起请求时&#xff0c;可以通过配置 axios 的请求选项来携带 Cookies。具体来说&#xff0c;确保跨域请求时&#xff0c;设置 withCredentials: true&#xff0c;以便发送和接收 Cookies。 1. Axios 配置携带 Cookie 首先确保你在 axios 请求中设置了…

深度学习笔记20_数据增强

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 一、我的环境 1.语言环境&#xff1a;Python 3.9 2.编译器&#xff1a;Pycharm 3.深度学习环境&#xff1a;TensorFlow 2.10.0 二、GPU设置…

PHP中的ReflectionClass常见用法

ReflectionClass是 PHP 中的一个类&#xff0c;它提供了有关类的信息的反射。 使用ReflectionClass可以在运行时获取关于类的各种信息&#xff0c;例如类的名称、方法、属性、注释等。 以下是一些常见的用法&#xff1a; 获取类的名称&#xff1a; $reflection new Reflec…

LLM实践--支线:拯救Continue Pretrain的数据

背景 首先介绍下什么是Continue Pretrain&#xff08;CP&#xff09;。CP 和 Pretrain、SFT一样指的是 LLM 训练的一个阶段&#xff0c;在前大模型时代还被称作Post Pretrain。CP 是在Pretrain和SFT之间的训练阶段&#xff0c;目的是为模型注入领域知识&#xff0c;这个领域是…

mqtt客户端订阅一直重复连接?

文章 前言错误场景问题分析解决方案后言 前言 ✨✨ 他们是天生勇敢的开发者&#xff0c;我们创造bug&#xff0c;传播bug&#xff0c;毫不留情地消灭bug&#xff0c;在这个过程中我们创造了很多bug以供娱乐。 前端bug这里是博主总结的一些前端的bug以及解决方案&#xff0c;感兴…

解决使用MobaXterm不能向Ubuntu上传下载文件的问题

如上图所示 解决方案 新建连接&#xff0c;使用root账户建立ssh会话&#xff0c;就是建立会话的时候&#xff0c;用户名使用root。ubuntu系统默认不允许远程root账户建立连接&#xff0c;表现就是你新建ssh会话&#xff0c;在第一步输入root密码的时候&#xff0c;密码正确会报…

一文探索RareShop:首个面向消费者的RWA NFT商品发售平台

作者&#xff1a;Weilin&#xff0c;PANews 本轮牛市中&#xff0c;加密消费级应用正成为一种热门趋势&#xff0c;比如pump.fun和Polymarket等产品已成为C端用户的明星。加密货币正日益渗透到日常消费者的产品、服务和行为中。这意味着加密货币的使用不再局限于投机交易或去中…

appium启动hbuild打包的apk异常解决

目录 一、错误信息 二、问题解决 2.1 通过以下命令获取安装包名称&#xff1a; 2.2 这个launcher状态下的安装包名称和active&#xff0c;替换原先的安装包名称 一、错误信息 通过adb shell dumpsys activity | findstr "mResume" 命令获取的安装包信息&#xff…

从零开始学习OMNeT++系列第三弹——新建一个使用INET框架的工程

上一篇学习了如何新建一个omnet的工程&#xff0c;这篇来学习下INET框架以及如何使用INET框架来新建一个工程。 INET框架是什么 INET框架是一个开源模型库&#xff0c;用于OMNeT仿真环境。它为研究者和学生在使用通信网络时提供协议、代理和其他模型。当设计和验证新协议或探…

深入理解计算机系统--计算机系统漫游

对于一段最基础代码的文件hello.c&#xff0c;解释程序的运行 #include <stdio.h>int main() {printf ( "Hello, world\n") ;return 0; }1.1、信息就是位上下文 源程序是由值 0 和 1 组成的位&#xff08;比特&#xff09;序列&#xff0c;8 个位被组织成一组…

wx.chooseMedia深入研究!

如何处理wx.chooseMedia选择的媒体文件&#xff1f; 当使用wx.chooseMedia选择媒体文件后&#xff0c;可以根据以下步骤进行处理&#xff1a; 一、获取媒体文件信息 在成功回调函数中&#xff0c;可以通过res.tempFiles获取选择的媒体文件数组。每个元素包含了媒体文件的相关…

安防监控摄像头图传模组,1公里WiFi无线传输方案,监控新科技

在数字化浪潮汹涌的今天&#xff0c;安防监控领域也迎来了技术革新的春风。今天&#xff0c;我们就来聊聊这一领域的产品——摄像头图传模组&#xff0c;以及它如何借助飞睿智能1公里WiFi无线传输技术&#xff0c;为安防监控带来未有的便利与高效。 一、安防监控的新篇章 随着…

mysql--基本查询

目录 搞定mysql--CURD操作&#xff0c;细节比较多&#xff0c;不难&#xff0c;贵在多多练 1、Create--创建 &#xff08;1&#xff09;单行插入 / 全列插入 &#xff08;2&#xff09;插入否则替换 &#xff08;3&#xff09;替换 2、Retuieve--select 1&#xff09;全…

其他-自己手动更换汽车电磁进排气阀0.9.2

其他-自己手动更换汽车电磁进排气阀0.9.0 背景本次工具流程注意参考 2024年10月18日08:57:00—0.9.2 背景 昨天手动更换了电磁阀&#xff0c;记录下过程和注意事项&#xff0c;简单总结了一下 本次工具 10号套筒和工具老虎钳锤子一字改刀新的进排气电磁阀 流程 打开引擎盖…

波克 上海 Unity开发笔试题 2024

波克 Unity开发笔试题 2024 主要分为四部分 如果没有准备好,不要点击笔试链接,进入就会自动开始 Unity 1.Unity生命周期执行顺序 Awake → OnEnable → Start → FixedUpdate → Update → LateUpdate 2.阅读代码,可能会出现哪些问题? string cnt = ""; lis…

FreeRTOS - 软件定时器

在学习FreeRTOS过程中&#xff0c;结合韦东山-FreeRTOS手册和视频、野火-FreeRTOS内核实现与应用开发、及网上查找的其他资源&#xff0c;整理了该篇文章。如有内容理解不正确之处&#xff0c;欢迎大家指出&#xff0c;共同进步。 1. 软件定时器 软件定时器也可以完成两类事情…

JDK-23与JavaFX的安装

一、JDK-23的安装 1.下载 JDK-23 官网直接下载&#xff0c;页面下如图&#xff1a; 2.安装 JDK-23 2.1、解压下载的文件 找到下载的 ZIP 文件&#xff0c;右键点击并选择“解压到指定文件夹”&#xff0c;将其解压缩到您希望的目录&#xff0c;例如 C:\Program Files\Java\…

多进程思维导图

1> 思维导图 2> 使用父子进程完成两个文件的拷贝&#xff0c;父进程拷贝前一半&#xff0c;子进程拷贝后一半&#xff0c;两个进程同时进行&#xff08;君子作业&#xff09; #include <myhead.h> typedef struct sockaddr_in addr_in_t; typedef struct sockaddr…

LeetCode //C - 412. Fizz Buzz

412. Fizz Buzz Given an integer n, return a string array answer (1-indexed) where: answer[i] “FizzBuzz” if i is divisible by 3 and 5.answer[i] “Fizz” if i is divisible by 3.answer[i] “Buzz” if i is divisible by 5.answer[i] i (as a string) if no…