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

方法一、

前端内容:

javascript 复制代码
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);

后端:

java 复制代码
@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);
    }

方法二、

直接纯前端实现:

javascript 复制代码
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;
相关推荐
cypking1 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵1 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆1 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七2 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03012 小时前
vue3笔记(2)自用
前端·javascript·笔记
德育处主任Pro2 小时前
# JsSIP 从入门到实战:构建你的第一个 Web 电话
前端
拾光拾趣录2 小时前
setTimeout(1) 和 setTimeout(2) 的区别
前端·v8
拾光拾趣录2 小时前
内存泄漏的“隐形杀手”
前端·性能优化
摸鱼仙人~3 小时前
HttpServletRequest深度解析:Java Web开发的核心组件
java·开发语言·前端
索西引擎3 小时前
【工程化】浅谈前端构建工具
前端·webpack·gulp·turbopack