在 <CSVLink/> React JSX 中将列数据转换为字符串

Question

我对 JS 和 JSX 还很陌生，并且一直在学习。

我制作了一个按钮，用于从 db2 table 下载包含 {data} 和 {columns} 的 CSV 文件。当我在页面本身上输出此数据时，phone 数字看起来很正常： 199028675309.

但是当我尝试使用 <CSVLink/> 将其下载为 CSV 格式时，phone 数字在 CSV 文件中被转换为科学记数法，如下所示：1.99029E+11

我知道我需要将 phone 数字更改为字符串，但我尝试在标记中使用 DataType='String'。然后我尝试在下面的列中添加 DataType:'string'，但是 none 这改变了任何东西。

是否可以在下载文件之前更改 phone 数字数据类型，使数字不采用科学计数法？这将如何完成？

我在下面放了一段代码：

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>

Answer 1

是您的电子表格应用程序进行了更改。不能强制应用程序（您在其中打开 CSV 文件）应采用哪种类型的列。如果你想正确显示它，你需要在文本前加上 ="" 并在后面加上额外的两个引号。修改library issue中Michael McCabe所示的数据： CSV Link library issue

添加沙箱（使用 react-csv-2.2.2 下载 csv 文件）link here。您必须遍历数据并以上述格式

专门更改 Phone number

const csvData = [
  {
    firstname: '=""468768768833943384""',
    lastname: 'me',
    email: 'me@something.com'
  }
];

结果：

Answer 2

我能够解决这个问题，牢记 Ghan 的回答。我在 console.log(response) 之后添加了一个 responseJson.forEach，强制使用新名称 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);
  };

然后在columns下面，我基本上是复制了一个，然后在下面粘贴了一个新的，然后给它起了一个新的名字（例如columnsCSV）

      const columnsCSV = [{
        key: 'Calling Phone CSV',
        label: 'Calling Phone'
      }, {
        key: 'Called Phone CSV',
        label: 'Called Phone'
      }];

然后在 return 中，我将 CSVLink 编辑为：

{ data.length ? 
<CSVLink data={data} columns={columnsCSV} filename={'testfile'} target="_blank">
  Download CSV 
</CSVLink> 
: null }

基本上就是这样。

在 <CSVLink/> React JSX 中将列数据转换为字符串

Converting column data into a string in <CSVLink/> React JSX

javascript

reactjs

csv

jsx

export-to-csv