如何在react中导出csv对象

2024-06-26

我试图弄清楚是否有任何方法可以使用 React 在我的网页上单击“导出”按钮来下载 csv 文件。

这是我现在在组件下的内容 -

<div>
    <Button variant="contained" 
        size="small" 
        onClick={this.handleExport}>
        <SaveIcon label="Export" />
        Export
    </Button>
</div>

其中,handleExport 使用后端的 JSON 数据生成 csv 文件。

我尝试过使用react-csv、react-csv-downloader包,但它们都不适合我。

有什么方法可以下载 csv 文件 onClick 吗?示例代码将不胜感激。

Thanks!


我已经实现了这个逻辑。代码非常不言自明。

    export function exportCSVFile(headers, items, fileTitle) {
      if (headers) {
        items.unshift(headers)
      }
    
      // Convert Object to JSON
      var jsonObject = JSON.stringify(items)
    
      var csv = convertToCSV(jsonObject)
    
      var exportedFilename = fileTitle + '.csv' || 'export.csv'
    
      var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
      if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, exportedFilename)
      } else {
        var link = document.createElement('a')
        if (link.download !== undefined) { // feature detection
          // Browsers that support HTML5 download attribute
          var url = URL.createObjectURL(blob)
          link.setAttribute('href', url)
          link.setAttribute('download', exportedFilename)
          link.style.visibility = 'hidden'
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        }
      }
    }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在react中导出csv对象 的相关文章

  • 用玩笑模拟高阶组件

    我想确保 HOC 组件被开玩笑地调用 但我似乎无法理解jest mock上班 我的 HOC 是这样的 const withEntity args gt const wrappedComponent WrappedComponent gt c
  • React:为什么内联样式需要双括号语法 style{{..}}

    我的问题涉及内联反应组件的样式 据我了解 在 JSX 中 variableName 需要大括号来引用任何 JS 变量或表达式 因此 使用以下构造添加内联样式对我来说很有意义 所需的样式存储在 JavaScript 变量中 然后在 JSX 标
  • 获取访客的 Optimizely A/B 测试和变化

    当我在网站上运行实验时 我希望能够找出当前访问者看到的测试和变体 我无法找到如何做到这一点优化Javascript API https www optimizely com docs api 您可以获得第一个正在运行的实验的 ID 假设您有
  • JavaScript 变量带有一个我需要在 Html.ActionLink 中使用的 ID

    我的 jQuery 代码中有一个 JavaScript 变量 其中包含一个我需要在我的Html ActionLink但它不起作用 Html ActionLink Genomf r AnswerForm AnswerNKI new id go
  • 禁用拉斐尔论文上的浏览器上下文菜单

    我有一篇拉斐尔论文定义为R1 Raphael 0 0 800 600 我想在本文中禁用上下文菜单 以便我可以捕获鼠标右键单击事件 我没有这样的Raphael someDiv 800 600 禁用 div 的 oncontextmenu 属性
  • 滚动动态数据时,React Native“onViewableItemsChanged”不起作用

    我有一个 React Native FlatList 基于文档 https facebook github io react native docs flatlist html onviewableitemschanged I used o
  • 使用 webpack 从目录动态导入图像

    这是我当前通过 ES6 在 webpack 中导入图像和图标的工作流程 import cat from images cat1 jpg import cat2 from images cat2 svg import doggy from i
  • javascript 中的工厂模式与构造函数模式[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我看到了关于 javascript 设计模式的教程 虽然教程很好 但它给我留下了很少的问题 正如我所见 工厂和构造函数产生相同的结果
  • 在 ReactJS 中更改 URL onClick

    在我的项目中我有一个TabComponent它显示 3 个选项卡 首页 热门 全部 现在 我正在使用context反应维持 activetab它存储当前选项卡 toggleTab改变的方法activetab using setState 选
  • 从数组中删除空字符串,同时保持记录而不循环?

    这个问题在这里被问到 从数组中删除空字符串 同时保留非空字符串的索引记录 https stackoverflow com questions 18113243 remove empty strings from array while ke
  • 解析字符串:提取单词和短语 [JavaScript]

    我需要在以空格分隔的术语列表中支持确切的短语 用引号引起来 因此 用空格字符分割相应的字符串已经不够了 Example input foo bar lorem ipsum baz output foo bar lorem ipsum baz
  • 从组件刷新/重新加载 ember 路由

    我有一个组件 它实际上是一个模式对话框 当我完成该对话框并按 确定 按钮时 我想留在打开该对话框的停留页面上 这并不难 但问题是该对话框更改了数据 我通过 REST 调用获取数据 因此我需要刷新已经所在的路线以反映数据更改 因为我是从组件中
  • 汇总异常以保留模块

    我使用一个名为的汇总插件rollup plugin lit css转变 css文件转换成 javascript 模块 该插件非常简单 它本质上只是附加export default到文件 我的汇总配置使用preserveModules and
  • 为什么我的数据没有存储到我的 Firebase 实时数据库中?

    我正在尝试为网络应用程序制作一个注册页面 这会将数据发送到 firebase 数据库 我已阅读官方 firebase 文档并按照说明写入数据 但什么也不会写 在我的数据库控制台中 它显示的所有内容都是空 而不是我的数据 我没有收到控制台错误
  • 如何从 Instagram 的 media_preview 原始数据重新创建预览?

    如果您从 Instagram 的 API 获取 JSON 数据 您会发现media previewkey 其值是一些 Base64 编码的数据 它看起来确实像一些非常小的预览二进制数据 也许是压缩的 Take 这个帖子 https www
  • Javascript - 通过键获取特定 JSON 数组元素内的属性值

    我有一个像这样的 JSON 结构 map key1 valueA1 key2 valueA2 key3 valueA3 key1 valueB1 key2 valueB2 key3 valueB3 key1 valueC1 key2 val
  • 如何从索引文件迭代多个导入的模块

    我有一个名为Polygons我在那里创建了一个index jsfile 以导出目录中的所有文件 它看起来像这样 export default as europe from europe export default as northAmer
  • 如何使用 jQuery 解析 JavaScript 对象

    jQuery JavaScript 中用于解析 JSON 对象并返回键 值对的 foreach 等效项是什么 JSON 对象 是什么意思 JSON 是一种用于序列化对象的文本格式 如果要循环访问通过反序列化 JSON 字符串获得的对象中的属
  • 如何将国家/地区代码与电话号码分开?

    我的数据库中有很多电话号码 例如 1 123 456 7890 我要做的是将国家 地区拨号代码 在本例中为美国 加拿大的 1 与电话号码分开 我尝试创建所有国家 地区的 JSON 列表 并在加载页面时将电话号码和国家 地区代码分开 它工作正
  • ASP.NET MVC3 Ajax.ActionLink - 条件确认对话框

    我有一个 Ajax ActionLink 仅当满足某些条件 用户有未保存的更改 时 我才希望显示一个确认对话框 我创建了一个 JavaScript 函数 它根据需要显示确认对话框 并根据响应返回 true 或 false 我将其绑定到 Ac

随机推荐

  • Javascript 函数调用中的变量名

    我试图实现以下伪代码 function processAboutLink function processServicesLink var variableName about process variableName Link var v
  • Python Selenium - 按类和文本查找元素

    我正在尝试对搜索结果进行分页 我得到一个 NoSuchElementException Unable to locate element lt insert xpath here gt 这是 HTML div class pagnHy sp
  • 从 Django 视图启动多核后台进程

    我使用 Django 为多核科学计算库创建基于浏览器的 GUI 工作流程大致如下 在浏览器中按 运行分析 调用django视图 在 django 视图中 调用库 为了简单起见 我们这样说 execfile path to library p
  • 传递额外的参数来绑定?

    我有两个类似这样的函数 primaryImageLoaded this setState primaryImageLoaded true secondaryImageLoaded this setState secondaryImageLo
  • 在 Maps API v2 中完全禁用 onMarkerClickListener

    我想禁用点击 点击map markers 我知道你可以disable default behavior通过设置一个空的map setOnMarkerClickListener并返回 true 但是 这仍然将点击视为单击标记 我想将水龙头传递
  • UWP 应用程序从系统上的随机位置访问文件

    在UWP中存在文件和权限限制 因此我们只能直接从少数文件夹访问文件 或者我们可以使用filepicker从系统上的任何位置访问 如何使用从 filepicker 中选取的文件并在应用程序运行时随时再次使用它们 尝试通过路径再次使用它们 但它
  • Seekbar 和 InsetDrawable 获取进度

    嗨 我尝试自定义一个搜索栏 这是我的问题 main xml
  • 在 ARC 中异步生成 CGImagesForTimes

    如果我在启用了 ARC 的项目中运行以下命令 则完成处理程序永远不会触发 但如果没有 ARC 它会按预期工作 我在这里缺少什么 NSURL url NSURL URLWithString http media w3 org 2010 05
  • 如何在值为 std::set (从某物映射到集合)的 std::map 中使用 emplace() ?

    问题 我有一个std map
  • 如何检查 Windows 文件索引是否打开或关闭

    C 中是否有一个 API 可用于检查文件索引是否打开或关闭 代码受到赞赏 WMI 在 C 中是一个痛苦 但本机服务 API 非常干净 SC HANDLE hSCManager OpenSCManager NULL NULL SC MANAG
  • 如何在 m1 Mac 上安装 pandas

    clang Wno unused result Wsign compare Wunreachable code fno common dynamic DNDEBUG g fwrapv O3 Wall iwithsysroot System
  • xslt-1.0 迭代固定值列表

    我需要根据输入生成固定数量语言的 XML 结构 该输入可能包含也可能不包含每种语言的信息 如果信息丢失 我需要生成空元素 问题是 我需要在输出结构中的许多地方迭代语言 最简单的方法是使用类似的东西
  • SQL CASE 语句

    我有以下查询 我想将它们放入 sql CASE 语句中 这样我只有一个查询 但我不知道该怎么做 有人可以帮助我吗 IF SELECT EtlLoadId FROM ssislogs audit processcontrol WHERE Su
  • 如何用mockito模拟最后一堂课

    我有最后一堂课 是这样的 public final class RainOnTrees public void startRain some code here 我在其他类中使用这个类 如下所示 public class Seasons R
  • WordPress 固定链接永远不会在本地主机 Ubuntu 12.10 上工作

    除默认设置外 Wordpress 永久链接不起作用 如何启用此重写 我试过了 sudo a2enmod rewrite sudo service apache2 restart 永久链接保存到 localhost wordpress 中的
  • Alembic - sqlalchemy 初始迁移

    我在创建初始迁移时遇到问题 该迁移将自动包含我通过使用共享 Base declarative base 在 models py 中定义的表 当我输入命令时 alembic revision autogenerate alembic 创建一个
  • 删除字段后重置 JavaScript 计数器

    我有一个 javascript 函数 可以添加带有计数器的输入字段 现在 当我删除其中一个字段时 它会被删除 但计数器仍在继续 JS 或 JQuery 有没有办法重置计数器并自动递增计数器 JS code function var scnt
  • Android Studio 中显示的 Android 设备列表卡住了

    卡在 Android Studio 中加载设备中 在 Stack Overflow 中发现以下问题但没有帮助 Android Studio 设备列表加载时卡住 https stackoverflow com q 51101178 11630
  • 如何根据路径/URL 选择图像?

    我想根据图片的 URL 来选择图片 但由于某种原因 它没有发挥作用 最终我追求的是这样的东西 var imgs img src images object png not hidden 但即使是简单的事情 比如 img src images
  • 如何在react中导出csv对象

    我试图弄清楚是否有任何方法可以使用 React 在我的网页上单击 导出 按钮来下载 csv 文件 这是我现在在组件下的内容 div div