前端及后端实现csv文件下载功能

news/2025/3/14 10:47:38/

方法一、

前端内容:

const url = window.URL.createObjectURL(new Blob([res.data]));
const link = document.createElement('a');
link.href = url;
const fileNameDateTime = getFormattedDateTime();
const filename = "用户提现列表"+fileNameDateTime+'.csv';
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);

 后端:

@GetMapping("/downloadCsv")@PreAuthorize("hasAuthority('system')")public ResponseEntity<byte[]> downloadCsv() {// 查询数据库获取数据List<SysUsdt> sysUsdtList = sysUsdtService.list(new QueryWrapper<SysUsdt>().orderByDesc("joinTime"));for (SysUsdt sysUsdt : sysUsdtList) {QueryWrapper<SysUser> queryuserWrapper = new QueryWrapper<>();queryuserWrapper.eq("id",sysUsdt.getUserid());SysUser sysUser = sysUserService.getOne(queryuserWrapper);if(sysUser==null){sysUsdt.setUsername("用户已删除");}else {sysUsdt.setUsername(sysUser.getUsername());}}// 创建字节数组输出流ByteArrayOutputStream outputStream = new ByteArrayOutputStream();PrintWriter writer = new PrintWriter(new OutputStreamWriter(outputStream));// 写入 CSV 表头writer.println("ID,用户名,充值金额(人民币),充值金额(USDT),是否到账,到账时间");// 填充数据for (SysUsdt sysUsdt : sysUsdtList) {writer.println(sysUsdt.getId() + "," +sysUsdt.getUsername() + "," +sysUsdt.getMoney().doubleValue() + "," +sysUsdt.getUsdt().doubleValue() + "," +sysUsdt.getStatus() + "," +sysUsdt.getConfirmtime());}writer.flush();byte[] csvBytes = outputStream.toByteArray();// 设置响应头HttpHeaders headers = new HttpHeaders();headers.setContentType(MediaType.parseMediaType("text/csv"));headers.setContentDispositionFormData("attachment", "充值明细.csv");return new ResponseEntity<>(csvBytes, headers, HttpStatus.OK);}

方法二、

直接纯前端实现:

const { fileName, fileData, fileType } = res.data;// 将 Base64 数据转换为二进制数据const byteCharacters = atob(fileData); // 解码 Base64const byteNumbers = new Array(byteCharacters.length);for (let i = 0; i < byteCharacters.length; i++) {byteNumbers[i] = byteCharacters.charCodeAt(i);}const byteArray = new Uint8Array(byteNumbers);// 创建 Blob 对象const blob = new Blob([byteArray], { type: fileType });// 创建下载链接const url = window.URL.createObjectURL(blob);const link = document.createElement('a');link.href = url;link.setAttribute('download', fileName);document.body.appendChild(link);link.click();document.body.removeChild(link);window.URL.revokeObjectURL(url);urlsVisable.value = false;


http://www.ppmy.cn/news/1579017.html

相关文章

spring boot+vue项目(免费)

医院管理系统项目地址&#xff1a; https://github.com/WangJingBo1234/hospital_manager 如果可以的话&#xff0c;麻烦大家在github上给我点个星&#xff0c;好人一生平安&#xff01;&#xff01;&#xff01; 该项目技术栈&#xff1a; 后端spring boot整合jwt&#xff0…

DeepSeek-R1 论文阅读总结

1. QA问答&#xff08;我的笔记&#xff09; Q1: DeepSeek如何处理可读性问题&#xff1f; 通过构建冷启动数据&#xff08;数千条长CoT数据&#xff09;微调基础模型&#xff0c;结合多阶段训练流程&#xff08;RL训练、拒绝采样生成SFT数据&#xff09;&#xff0c;并优化输…

音视频入门基础:RTP专题(17)——音频的SDP媒体描述

一、引言 在《音视频入门基础&#xff1a;RTP专题&#xff08;3&#xff09;——SDP简介》中对SDP协议进行了简介&#xff0c;以H.264为例介绍了视频的SDP的媒体描述。本文对该文章进行补充&#xff0c;以AAC为例&#xff0c;讲述音频的SDP媒体描述。 二、文档下载 《RFC 364…

Spring Boot+Vue项目从零入手

Spring BootVue项目从零入手 一、前期准备 在搭建spring bootvue项目前&#xff0c;我们首先要准备好开发环境&#xff0c;所需相关环境和软件如下&#xff1a; 1、node.js 检测安装成功的方法&#xff1a;node -v 2、vue 检测安装成功的方法&#xff1a;vue -V 3、Visu…

TONGYI Lingma(通义灵码),GitHub Copilot和Cursor 对比

以下是 TONGYI Lingma&#xff08;通义灵码&#xff09;、GitHub Copilot和 Cursor 的横向对比分析。 核心功能对比 功能/特性TONGYI Lingma&#xff08;阿里云&#xff09;GitHub CopilotCursorAI 模型阿里自研模型&#xff08;可能结合 CodeLlama 等&#xff09;GPT-3.5/GPT…

001 | How To Take Study Notes:五种做笔记的方法(中英)

目录 How To Take Study Notes: 5 Effective Note Taking Methods Try these 5 methods to find the best note taking method for you! 1、The Cornell Method Advantages: What Does it look like? 2、The Mapping Method Advantages: What Does it look like? How…

AI+视频监控电力巡检:EasyCVR视频中台方案如何赋能电力行业智能化转型

随着电力行业的快速发展&#xff0c;电力设施的安全性、稳定性和运维效率变得至关重要。传统视频监控系统在实时性、智能化及多系统协同等方面面临严峻挑战。EasyCVR视频中台解决方案作为一种先进的技术手段&#xff0c;在电力行业中得到了广泛应用&#xff0c;为电力设施的监控…

格雷希尔: G80P系列在制动卡钳行业自动化应用

汽车卡钳是汽车制动系统中非常重要的组成部分&#xff0c;其作用不可小觑。 首先&#xff0c;卡钳可以使制动力的提升起到显著的效果。当驾驶员踩下刹车踏板时&#xff0c;卡钳会将刹车片推向刹车盘&#xff0c;产生摩擦力&#xff0c;从而使车轮减速、停止或保持停止状态。此外…