首页 > 其他分享 >[经典] 前端js将文件流导出为csv/excel文件

[经典] 前端js将文件流导出为csv/excel文件

时间:2024-11-12 08:48:19浏览次数:3  
标签:文件 url excel js link csv data

前端将文件流导出为csv/excel文件有两种方式:
1.后端直接返回文件连接:
前端正常请求,后端返回一个静态文件链接,直接使用:
window.location.href = url
简单,但是缺点是耗资源,后端需要把数据转化为excel存起来,并且直接暴露连接。
2.后台返回二进制流:
前台请求后台接口拿到二进制流转化为文件
前端实现浏览器将数据下载为文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端将文件流导出为csv/excel文件</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    
</body>
<script>
    function downloadFile(data,name){
      if (!data) {
        console.log('下载失败,解析数据为空!')
        return
      }
      // 创建一个新的url,此url指向新建的Blob对象
      // let url = window.URL.createObjectURL(new Blob([data]))
      let url = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(data);
      // 创建a标签,并隐藏改a标签
      let link = document.createElement('a')
      link.style.display = 'none'
      // a标签的href属性指定下载链接
      link.href = url
      //setAttribute() 方法添加指定的属性,并为其赋指定的值。
      link.setAttribute('download', name + '.csv')
      document.body.appendChild(link)
      link.click()
    }
    $.ajax({
      url: "你的接口后台直接返回二进制流",
      type: "post",
      responseType: 'blob',
      success: function(result){
        console.log(result)
        downloadFile(result,"test")
      }
    });

</script>
</html>

标签:文件,url,excel,js,link,csv,data
From: https://blog.csdn.net/renqq001/article/details/143700556

相关文章

  • Linux核心文件
    Linux常见核心文件文件说明/etc/hostname主机名/etc/os-release系统版本信息【1】、查看linux基本信息面试题:你拿到一个linux后一般做什么?检查,优化主机名ip系统版本内核版本。。。。1、查看与修改主机名xu@xu-ubuntu:~$hostnamectl......
  • Python OS 文件/目录方法
    说明目录创建和删除:mkdir 和 makedirs 可以创建新目录,使用时需要确保目录不存在。rmdir 和 removedirs 可用于删除目录,注意只会删除空目录和路径。文件操作:remove 用于删除文件,若文件不存在,则会抛出异常。rename 可以重命名文件或目录,但需要目标路径不存在。路......
  • Ftrans文件自动化传输方案:释放双手,让数据流动更自由!
    随着企业业务不断扩大发展,数据传输和汇集逐渐成为其业务链中的一个重要环节。在企业内部,一般会存在多台文件存储服务器,基于业务开展需要,存在将不同服务器上的不同数据文件自动化传输到同一台文件存储服务器上的场景需求。当下企业选择较多的文件自动化传输方式如FTP、Rsync,可以......
  • 基于nodejs+vue智慧医院信息管理系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于医院信息管理系统的研究,现有研究主要以传统的医院管理信息化为主,侧重于单一功能模块的优化,如单独的挂号系统或者病历管理系统等。专门针对整合多种......
  • c中的文件管理
    大家好,今天我们来看看语言中的文件管理,聊到这个,我们就得先说说文件的特点。1.文件是一种让数据持久化的方法,使用文件可以将数据直接存放在电脑的硬盘上,做到数据持久化。那么什么是文件呢?硬盘上的是文件,但是在程序设计中,我们一般谈的文件有两种,一种是程序文件,一种是数据文件(......
  • 基于nodejs+vue智慧迎新系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于迎新系统的研究,现有研究多集中在系统的基本功能构建与流程优化方面,如学生信息管理、简单的流程自动化等,专门针对涵盖多部门(招生部、教务部、财务部......
  • 基于nodejs+vue智慧幼教服务系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于智慧幼教服务系统的研究,现有研究主要以幼儿教育的数字化管理为主,如部分研究聚焦于单一功能模块,像考勤系统或者课程资源数字化等方面的探索。专门针......
  • Qt构建与解析Json示例
    本文以B站UP主“明王讲QT”的【QT开发专题-天气预报】中的章节内容作为学习Qt中构建、解析Json的参考方法。1、Json文本{"info":{"asian":true,"captical":"beijing","founded":1949},"name":"China&qu......
  • web安全漏洞之文件上传
    文件上传       1什么是文件上传   文件上传就比如上传用户头像,上传图片,上传附件等。在服务端实现文件上传功能时,如果对用户上传的文件没有做好处理,就有可能导致十分严重的安全问题,比如被上传木马文件造成RCE(远程代码执行) php文件上传的基本代码 ......
  • Qt读写文件简单示例
    voidtestReadWriteFile(){//当前程序所在文件夹QStringdirPath=QCoreApplication::applicationDirPath();QStringpath=QDir::cleanPath(dirPath+QDir::separator()+"test.txt");qDebug()<<"Filepath:"<<path;......