0

is there a way to create an excel file from js code in React native? Can you share the library, including the examples how to use it?

I need to export and download some data to excel file and download it to mobile phone.

Thank you!

hallz12
  • 629
  • 2
  • 9
  • 15

3 Answers3

10

If using Expo, the following code should work for you. It creates a Sheet and then creates a Share dialog for the user to open it in which ever app they like like Email, Office, etc:

import XLSX from 'xlsx';
import * as FileSystem from 'expo-file-system';
import * as Sharing from 'expo-sharing';

var data = [{
    "name": "John",
    "city": "Seattle"
  },
  {
    "name": "Mike",
    "city": "Los Angeles"
  },
  {
    "name": "Zach",
    "city": "New York"
  }
];
var ws = XLSX.utils.json_to_sheet(data);
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Cities");
const wbout = XLSX.write(wb, {
  type: 'base64',
  bookType: "xlsx"
});
const uri = FileSystem.cacheDirectory + 'cities.xlsx';
console.log(`Writing to ${JSON.stringify(uri)} with text: ${wbout}`);
await FileSystem.writeAsStringAsync(uri, wbout, {
  encoding: FileSystem.EncodingType.Base64
});

await Sharing.shareAsync(uri, {
  mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  dialogTitle: 'MyWater data',
  UTI: 'com.microsoft.excel.xlsx'
});
Parag Thakur
  • 189
  • 1
  • 8
5

You can convert JSON to excel file

You have to use two pacakge

  1. react-native-fs
  2. XLSX (for convert json to excel file)

here is an example

if you want to write Excel file

import { writeFile, readFile } from 'react-native-fs';
import XLSX from 'xlsx';

var data = [
{"name":"John", "city": "Seattle"},
{"name":"Mike", "city": "Los Angeles"},
{"name":"Zach", "city": "New York"}
];

 var ws = XLSX.utils.json_to_sheet(data);

  var wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb,ws,"Prova");

  const wbout = XLSX.write(wb, {type:'binary', bookType:"xlsx"});
  var RNFS = require('react-native-fs');
  var file = RNFS.ExternalStorageDirectoryPath + '/test.xlsx';
  writeFile(file, wbout, 'ascii').then((r)=>{/* :) */}).catch((e)=>{/* :( */});

if you want to read Excel file

import { writeFile, readFile } from 'react-native-fs';
import XLSX from 'xlsx';

  const filePath="/Users/copoo/Downloads/Data.xlsx";
  const excelFile=await RNFS.readFile(filePath,'ascii');
  const workbook = XLSX.read(excelFile, {type:'binary'});
  console.log(workbook,"excelFile")
Muhammad Numan
  • 23,222
  • 6
  • 63
  • 80
  • no error it gets completed ... but I am not able to find the written file. And does this work with nested JsonObject – Rajat Gupta Jun 02 '20 at 20:49
  • https://github.com/itinance/react-native-fs/issues/540 you can see RNFS.ExternalStorageDirectoryPath which actually show you storage root dir. you should console in catch block and debug why it is not writing file now. it was working when i was post this answer – Muhammad Numan Jun 02 '20 at 21:36
1

I would use JSON, which is native to JavaScript, and can be imported directly into Excel

If you don't already know how, Here is a post explaining how to create a JSON file from a JS object:

write/add data in JSON file using node.js

Zock77
  • 951
  • 8
  • 26