前端及后端实现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); // 解码 Base64
        const 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;