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

npm i --save export-from-json or yarn add export-from-json

Normal Javascript code

<script src="https://unpkg.com/export-from-json/dist/umd/index.min.js"></script>
<script>
const data = [{ sample: 'sample'}, { sample1: 'sample1' }]
const fileName = 'download'
const exportType = 'excel'
window.exportFromJSON({ data, fileName, exportType })
</script>

React.Js Code

import React, { Component } from 'react';
import exportFromJSON from 'export-from-json'
const data = [{ foo: 'foo' }, { bar: 'bar' }]
const fileName = 'download'
const exportType = 'xls'
class App extends Component {
ExportToExcel = () => {
exportFromJSON({ data, fileName, exportType })
}
render() {
return (
<div className="App">
<header className="App-header" style={{textAlign : 'center'}}>
<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/>
<button type="button" onClick={this.ExportToExcel}>Export To Excel</button>
</header>
</div>
);
}
}
export default App;

Node.js server code

const http = require('http')
const exportFromJSON = require('export-from-json')
http.createServer(function (request, response){
const data = '[{ sample: 'sample'}, { sample1: 'sample1' }]'
const fileName = 'download'
const exportType = 'csv'
const result = exportFromJSON({
data,
fileName,
exportType,
processor (content, type, fileName) {
switch (type) {
case 'txt':
response.setHeader('Content-Type', 'text/plain')
break
case 'xls':
response.setHeader('Content-Type', 'application/vnd.ms-excel')
break
case 'csv':
response.setHeader('Content-Type', 'text/csv')
break
case 'json':
response.setHeader('Content-Type', 'text/plain')
break
}
response.setHeader('Content-disposition', 'attachment;filename=' + fileName)
return content
}
})
response.write(result)
response.end()
}).listen(8080, '127.0.0.1')

Types - Properties

Even you can also reference these exported types through mounted static field types as below

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