Export JSON Data To Excel in React Application

Introduction

 
NPM package export-from-json provides service to Export in xml, xls, csv, json, plain text files from JSON.
 
exportFromJSON package supports EcmaScript Module, UMD importing, CommonJS. exportFromJSON package converts JSON data to various Types, which uses a front-end downloader as a default processor. For browser environment, there is a content size limitation for default processor which can be resolved using server-side solution.
 
Official Package Link: export-from-json
 
Package Installation 
  1. npm i --save export-from-json or yarn add export-from-json  
Normal Javascript code
  1. <script src="https://unpkg.com/export-from-json/dist/umd/index.min.js"></script>  
  2. <script>  
  3.     const data = [{ sample: 'sample'}, { sample1: 'sample1' }]  
  4.     const fileName = 'download'  
  5.     const exportType = 'excel'  
  6.    
  7.     window.exportFromJSON({ data, fileName, exportType })  
  8. </script> 
React.Js Code
  1. import React, { Component } from 'react';  
  2. import exportFromJSON from 'export-from-json'  
  3.   
  4. const data = [{ foo: 'foo' }, { bar: 'bar' }]  
  5. const fileName = 'download'  
  6. const exportType = 'xls'  
  7.   
  8. class App extends Component {  
  9.   
  10.   ExportToExcel = () => {  
  11.     exportFromJSON({ data, fileName, exportType })  
  12.   }  
  13.   
  14.   render() {  
  15.     return (  
  16.       <div className="App">  
  17.         <header className="App-header" style={{textAlign : 'center'}}>  
  18.           <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png" className="App-logo" alt="logo" width="200" /><br/>  
  19.           <button type="button" onClick={this.ExportToExcel}>Export To Excel</button>  
  20.         </header>  
  21.       </div>  
  22.     );  
  23.   }  
  24. }  
  25.   
  26. export default App; 
Node.js server code
  1. const http = require('http')  
  2. const exportFromJSON = require('export-from-json')  
  3.    
  4. http.createServer(function (request, response){  
  5.     const data = '[{ sample: 'sample'}, { sample1: 'sample1' }]'  
  6.     const fileName = 'download'  
  7.     const exportType = 'csv'  
  8.    
  9.     const result = exportFromJSON({  
  10.         data,  
  11.         fileName,  
  12.         exportType,  
  13.         processor (content, type, fileName) {  
  14.             switch (type) {  
  15.                 case 'txt':  
  16.                     response.setHeader('Content-Type''text/plain')  
  17.                     break  
  18.                 case 'xls':  
  19.                     response.setHeader('Content-Type''application/vnd.ms-excel')  
  20.                     break  
  21.                 case 'csv':  
  22.                     response.setHeader('Content-Type''text/csv')  
  23.                     break  
  24.                 case 'json':  
  25.                     response.setHeader('Content-Type''text/plain')  
  26.                     break  
  27.       
  28.             }  
  29.             response.setHeader('Content-disposition''attachment;filename=' + fileName)  
  30.             return content  
  31.         }  
  32.     })  
  33.    
  34.     response.write(result)  
  35.     response.end()  
  36.    
  37. }).listen(8080, '127.0.0.1')  

Types - Properties

 
Even you can also reference these exported types through mounted static field types as below 
  1. exportFromJSON({ data: JSONdata, fileName: 'download', exportType: exportFromJSON.types.xls }) 

Summary

 
There are very rare NPM packages, which provides the functionality of export in various format, Export From JSON is one of the best-featured NPM packages which provides the solution with the same. Using this package we can export to XML, Xls, CSV, JSON, and plain TEXT from JSON data file. There are also few options types that are available to customize this package.

Official Git Link - export-from-json


Similar Articles