当前位置: 首页 > article >正文

前端及后端实现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;


http://www.kler.cn/a/585883.html

相关文章:

  • Java高频面试之集合-12
  • 守护夏日安全防线:视觉分析驱动的区域入侵检测
  • PDF Reader
  • LLM推理和优化(2):节省KV Cache
  • 大白话阐述react和vue高阶组件的概念、优势及应用场景,以及区别,给出简单高阶组件的实现代码
  • 软件/硬件I2C读写MPU6050
  • SSL 原理及实验
  • MyBatis 如何解析 XML 配置文件和 SQL 映射文件
  • 1141. 【贪心算法】排队打水
  • LinuX---Shell---流程控制
  • VSTO(C#)Excel开发8:打包发布安装卸载
  • 开源后台管理系统推荐
  • oracle中OS BLOCK的含义
  • naive ui 控制 n-input 只可以输入26个英文字母+数字
  • 方差缩减梯度算法
  • 【嵌入式】嵌入式系统中的 SemVer 版本控制方案
  • 网络安全信息收集[web子目录]:dirsearch子目录爆破全攻略以及爆破字典结合
  • Flutter三棵树是什么,为什么这么设计
  • SpringBoot解决跨域
  • 鸿蒙app 开发 高效的 存储 数据 推荐使用 @tencent/mmkv(V2.1.0):