DEV Community

Alexandre Justen Filho
Alexandre Justen Filho

Posted on

Gerando Arquivo XLSX(excel) no React Native! json to XLSX

Bom, provavelmente, se você chegou a este post, está precisando salvar um arquivo xlsx (Excel) através do seu aplicativo móvel! Nos últimos dias, enfrentei o mesmo problema e tentei, por diversas vezes, o caminho errado. Segue aqui como você deve proceder.

O primeiro passo é fazer com que sua API retorne um JSON! No meu caso, eu tinha uma API que me retornava diretamente um xlsx, e isso não é um problema quando estamos trabalhando na web, devido ao DOM dos nossos navegadores. No entanto, não é esse o assunto que iremos abordar.

Nossa API deve ter um retorno como:
[{ "id": '1', "dado": 'primeiro dado' }, { "id": '2', "dado": 'segundo dado' }];

Um JSON bem simples, não importa o número de objetos, nem mesmo as propriedades, basta estar organizado.

Precisaremos instalar duas bibliotecas: react-native-fs e xlsx.

NPM:

npm i xlsx react-native-fs
Enter fullscreen mode Exit fullscreen mode

A partir desse momento, vou considerar que o seu response está salvo em 'data', contendo o JSON solicitado:

const data = [{ "id": '1', "dado": 'primeiro dado' }, { "id": '2', "dado": 'segundo dado' }];

Será necessário adicionar as permissões em:

android/app/src/main/AndroidManifest.xml
Enter fullscreen mode Exit fullscreen mode

Adicione os seguintes códigos:

 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
Enter fullscreen mode Exit fullscreen mode

Função para criar o arquivo xlsx e salvá-lo no seu dispositivo:

const exportDataToExcel = () => {

const data = [{ "id": '1', "dado": 'primeiro dado' }, { "id": '2', "dado": 'segundo dado' }];

            // criando o xlsx
            let sample_data_to_export = data;

            let wb = XLSX.utils.book_new();
            let ws = XLSX.utils.json_to_sheet(sample_data_to_export)
            XLSX.utils.book_append_sheet(wb, ws, "Users")
            const wbout = XLSX.write(wb, { type: 'binary', bookType: "xlsx" });

            //salvando o arquivo
            const fileName = 'arquivo.xlsx';
            const downloadDir = RNFS.DownloadDirectoryPath;
            const filePath = `${downloadDir}/${fileName}`;

            try {
                RNFS.writeFile(filePath,  wbout, 'ascii')
                console.log("sucesso,arquivo baixado em", filePath);
            } catch (error) {
                console.log('Erro ao baixar o arquivo:', error);

            }

        }
Enter fullscreen mode Exit fullscreen mode

Pronto, agora basta chamar.

exportDataToExcel();
Enter fullscreen mode Exit fullscreen mode

Lembre-se! Caso seu emulador não tenha o Excel, você pode transferir o arquivo para o PC usando.

adb pull /sdcard/arquivo.xlsx %USERPROFILE%\Desktop\
Enter fullscreen mode Exit fullscreen mode

O resultado será parecido com isto:

Image description

Top comments (0)