0
151
ViewsConvertir datos de columna en una cadena en <CSVLink/> React JSX
Soy bastante nuevo en JS y JSX y aprendo sobre la marcha.
Hice un botón para descargar un archivo CSV que contiene {datos} y {columnas} de una tabla de db2. Cuando envío estos datos en la página misma, los números de teléfono parecen normales: 199028675309 .
Pero cuando intento descargarlo como CSV usando <CSVLink/> , los números de teléfono se convierten a notación científica en el archivo CSV, así: 1.99029E+11
Sé que necesito cambiar los números de teléfono a una cadena, pero intenté usar DataType='String' en la etiqueta. Luego intenté agregar DataType: 'string' en las columnas a continuación, pero nada de esto cambió nada.
¿Es posible cambiar los tipos de datos del número de teléfono antes de que se descargue el archivo para que los números no estén en notación científica? ¿Cómo se haría esto?
Pongo un fragmento de código a continuación:
export default function Home() { const [data, setData] = useState([]); const fetchData = async (e) => { e.preventDefault(); const response = await fetch("/.../somedatabase", { method: "POST", headers: { "Content-Type": "application/json" }}); if (!response.ok) { throw new Error(`Error: ${response.status}`); } console.log(response); const responseJson = await response.json(); console.log(responseJson); setData(responseJson); }; const { body,validationResult } = require('express-validator'); const columns = [{ dataField: 'Calling Phone', text: 'Calling Phone' }, { dataField: 'Called Phone', text: 'Called Phone' }]; return ( <div> <main> <button> { data.length ? <CSVLink data={data} columns={columns} filename={'testfile'} target="_blank"> Download CSV </CSVLink> : null } </button> </main> </div>2 answers
Answer question0
Pude resolver esto teniendo en cuenta la respuesta de Ghan. Agregué después de console.log(response) un responseJson.forEach, forzando los cambios con un nuevo element["Calling Phone CSV"] .
if (!response.ok) { throw new Error(`Error: ${response.status}`); } console.log(response); const responseJson = await response.json(); responseJson.forEach(element => { element["Calling Phone CSV"] = `=""${element["Calling Phone"]}""`; element["Called Phone CSV"] = `=""${element["Called Phone"]}""` }); console.log(responseJson); setData(responseJson); }; Luego, debajo de las columnas, básicamente lo copié y pegué uno nuevo debajo, luego le di un nuevo nombre (por ejemplo, columnsCSV )
const columnsCSV = [{ key: 'Calling Phone CSV', label: 'Calling Phone' }, { key: 'Called Phone CSV', label: 'Called Phone' }]; Luego, en la devolución, edité el CSVLink para que sea:
{ data.length ? <CSVLink data={data} columns={columnsCSV} filename={'testfile'} target="_blank"> Download CSV </CSVLink> : null }Y eso es básicamente todo.
0
Es su aplicación de hoja de cálculo la que realiza ese cambio. No se puede imponer qué tipo de columna debe asumir una aplicación (en la que está abriendo sus archivos CSV). Si desea mostrarlo correctamente, debe poner ="" antes del texto y dos comillas adicionales después. Cambie los datos como lo muestra Michael McCabe en el problema de la biblioteca: Problema de la biblioteca CSV Link
Agregar un enlace de sandbox (que descarga el archivo csv usando react-csv-2.2.2 ) aquí . Debe iterar sobre los datos y cambiar el Phone number específicamente en el formato mencionado
const csvData = [ { firstname: '=""468768768833943384""', lastname: 'me', email: 'me@something.com' } ];Resultado:
