DEV Community

Alexandre Justen Filho
Alexandre Justen Filho

Posted on

3 1 1

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

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay