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

Question

我对 JS 和 JSX 还很陌生，并且在学习过程中不断学习。

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

但当我尝试使用 <CSVLink/> 将其下载为 CSV 文件时，电话号码会在 CSV 文件中转换为科学记数法，如下所示：1.99029E+11

我知道我需要将电话号码更改为字符串，但我尝试在标签中使用 DataType='String'。然后我尝试在下面的列中添加 DataType:'string'，但这些都没有改变任何东西。

是否可以在下载文件之前更改电话号码数据类型以使数字不是科学计数法？这将如何实现？

我在下面放了一个代码sn-p：

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

牢记 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);
  };

然后在列下，我基本上是复制它并在它下面粘贴一个新的，然后给它一个新名称（例如columnsCSV）

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

然后在返回时，我将CSVLink 编辑为：

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

基本上就是这样。

Answer 2

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

添加沙箱（使用react-csv-2.2.2 下载 csv 文件）链接here。您必须迭代数据并专门以上述格式更改Phone number

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

结果：