Last active
April 10, 2020 00:38
-
-
Save darklilium/ce75a76beab65155f862 to your computer and use it in GitHub Desktop.
[React]Exportar a Excel
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Para exportar a excel: | |
| //Esta es la funcion para el boton exportar. | |
| onClickExport(){ | |
| //console.log("asd export"); | |
| var data = this.state.interruptions; | |
| var exportResults = []; | |
| for (var i = 0; i < data.length; i++) { | |
| exportResults.push(translator(data[i])); | |
| } | |
| console.log(exportResults); | |
| var d = new Date(); | |
| d = d.getDate() + "/" + (d.getMonth() +1) + "/" + d.getFullYear()+ ', '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds(); | |
| exportToExcel(exportResults, "Interrupciones " + d , true); | |
| } | |
| //La función que exporta realmente: | |
| function exportToExcel(JSONData, ReportTitle, ShowLabel) { | |
| //If JSONData is not an object then JSON.parse will parse the JSON string in an Object | |
| var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData; | |
| var CSV = ''; | |
| //Set Report title in first row or line | |
| CSV += ReportTitle + '\r\n\n'; | |
| //This condition will generate the Label/Header | |
| if (ShowLabel) { | |
| var row = ""; | |
| //This loop will extract the label from 1st index of on array | |
| for (var index in arrData[0]) { | |
| //Now convert each value to string and comma-seprated | |
| row += index + ','; | |
| } | |
| row = row.slice(0, -1); | |
| //append Label row with line break | |
| CSV += row + '\r\n'; | |
| } | |
| //1st loop is to extract each row | |
| for (var i = 0; i < arrData.length; i++) { | |
| var row = ""; | |
| //2nd loop will extract each column and convert it in string comma-seprated | |
| for (var index in arrData[i]) { | |
| row += '"' + arrData[i][index] + '",'; | |
| } | |
| row.slice(0, row.length - 1); | |
| //add a line break after each row | |
| CSV += row + '\r\n'; | |
| } | |
| if (CSV == '') { | |
| alert("No hay datos para exportar"); | |
| return; | |
| } | |
| //Generate a file name | |
| var fileName = "Reporte_"; | |
| //this will remove the blank-spaces from the title and replace it with an underscore | |
| fileName += ReportTitle.replace(/ /g,"_"); | |
| //Initialize file format you want csv or xls | |
| var uri = 'data:text/csv;charset=utf-8,' + escape(CSV); | |
| // Now the little tricky part. | |
| // you can use either>> window.open(uri); | |
| // but this will not work in some browsers | |
| // or you will not get the correct file extension | |
| //this trick will generate a temp <a /> tag | |
| var link = document.createElement("a"); | |
| link.href = uri; | |
| //set the visibility hidden so it will not effect on your web-layout | |
| link.style = "visibility:hidden"; | |
| link.download = fileName + ".csv"; | |
| //this part will append the anchor tag and remove it after automatic click | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| } | |
| export default exportToExcel; |
Author
darklilium
commented
Apr 10, 2020
via email
No, a menos que lo programes tu mismo.
Saludos
Enviado desde Correo<https://go.microsoft.com/fwlink/?LinkId=550986> para Windows 10
…________________________________
De: Robinson Loreto <[email protected]>
Enviado: Thursday, April 9, 2020 7:32:43 PM
Para: darklilium <[email protected]>
Cc: Evelyn Hernández <[email protected]>; Author <[email protected]>
Asunto: Re: darklilium/[React]exportToExcel.txt
@loretoruiz commented on this gist.
________________________________
Hola que tal ? Soy algo nuevo en react. Por casualidad conoces alguna herramienta para generar reportes en Reactjs ? que genere Excel y Pdf y ademas pueda hacer mis reportes en modo de diseño y llamarlos desde la aplicacion ? Si sabes de algo te lo agradezco! Saludos.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub<https://gist.github.com/ce75a76beab65155f862#gistcomment-3248114>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ACA5A66TRIJSVZW6OWMHOULRLZSKXANCNFSM4MFD6IQQ>.
Entiendo. Si porque estoy viendo que tambien puedes generar esos archivos en el Backend (en este caso en Nodejs) pero no se si es buena practica, o es mejor generarlo en el cliente. En mi caso mi idea es traerme unos datos json con axios o request y generar un simple listado de excel. pero las herramientas que he visto no me convencen mucho porq traen un boton de descargar el archivo de una vez. y ejecutan el query o el llamado a la api al cargar la pagina, se relentiza todo .
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment