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

方法一、

前端内容：

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;