Download json as a file with react js

Active 1 year, 4 months ago. Viewed 1k times. Add a comment. Active Oldest Votes. You can use react-json-to-csv library for this purpose. Add the library using: yarn add react-json-to-csv Then use it like this: import React from "react"; import CsvDownload from "react-json-to-csv"; import data from ".

Muhammad Ali Muhammad Ali 4 4 silver badges 9 9 bronze badges. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Functional Javascript. JavaScript Tips. React Show sub menu.

React Answers. React Projects. React Native. NativeScript React. React Tips. React D3. React Ionic. React Bootstrap.

React Hooks. Material UI. Storybook for React. Top React Libraries. Shards React. React Suite. Vue Show sub menu. Vue Answers. Vue 3 Show sub menu. Vue 3 Testing. Vue 3 Projects. Vue Testing. NativeScript Vue. Vue and D3. Top Vue Packages. Vue Ionic. Ant Design Vue. Chakra UI Vue. Nodejs Show sub menu. Angular Show sub menu. Angular Material. TypeScript Show sub menu.

TypeScript Best Practices. Modern JavaScript. JavaScript Mistakes. JavaScript APIs. Python Show sub menu. This article was originally published on The Road To Enterprise blog. Read it there for the best reading experience. This functionality can be quite useful, as users can download the data for further processing or to share it.

You can find the full code example in the GitHub repo. After the project is created, cd into it to install dependencies by running npm install and then start the dev server with npm run dev. Let's start by creating a file with users data that will be used for downloading a file and rendering a table. Next, we need to update the App component to utilise the users data and display it in a table.

Besides that, we will add a button to trigger the download. Below you can see the code for the App. Besides the component. The former one calls the latter with appropriate arguments. The downloadFile function accepts an object as a parameter and expects three properties:. The data and fileType are used to create a blob that is downloaded.