I wrote a quote to pass the data into a table, and a button function to download the whole table. However, when we open the downloaded file with notes or text editor, it returns multiple double quotes and commas, which I want to remove. Below is my code:

import { CSVLink } from "react-csv";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import { Hidden } from "@mui/material";

const current = new Date();

  const date = `${current.getFullYear().toString().slice(-2)}.${'' current.getMonth() 1}.${current.getDate()}`;
  const yymmdd = `${current.getFullYear()}${'' current.getMonth() 1}${current.getDate()}`;
  const timestamp = `${current.getFullYear()}.${'' current.getMonth() 1}.${current.getDate()}`;
  const yesterday = `${current.getDate()-1}.${current.getMonth() 1}.${current.getFullYear()}`;
  const dynamicdate = `${current.getDate()}.${current.getMonth}.${current.getFullYear()}`;
  const hourminutesecond = `${current.getHours()}:${(current.getMinutes()<10?'0':'') current.getMinutes()}:${(current.getSeconds()<10?'0':'') current.getSeconds()}`;

function createData(misc, status, amount, balance, standard){
  return {misc, status, amount, balance, standard}
};

const rows = [
  createData("ブラジル銀行"),
  createData(`${timestamp}  BBコーポレートバンキング   ${hourminutesecond}`),
  createData('" "'),
  createData(`""`),
  createData(`" "`),
  createData(`""`),
  createData(`"総合預金明細書"`),
  createData(`""`),
  createData("TOKYO"),
  createData(`""`),
  createData("ACCOUNT NUMBER :    480330-0"),
  createData(`""`),
  createData(`"預金残高"`),
  createData(`"                                                                                                    "`),
  createData(`"口座種目"`,'レアル','ユーロ','USドル','円'),
  createData(`"普通預金"`,`"                 "`,`"                 "`,`"                 "`,"412,000"),
  createData(`"合計残高"`,`"                 "`,`"                 "`,`"                 "`,"412,000"),
  createData(`"                                 "`,`"                 "`,`"                 "`,`"                 "`,`"                 "`),
  createData(`"明細"`),
  createData(`"                                 "`,`"                 "`,`"                 "`,`"                 "`,`"                 "`),
  createData(`"普通預金　円"`),
  createData(`"年月日"`,'摘要','元本','差引残高',''),
  createData(`"            "`,`"前残高"`,`"                 "`,`"6,467,000 "`),
  createData(`${date}`,'入金　　　　　　　　　　　',`"         2,000"`,`"     6,489,000  "`),
  createData(`"            "`,`${yymmdd}-160538Deposit Card No.0077596-5 @9900 9910466 `,`"                 "`,`"                "`),
];
  
  export default function Transactions() {
    return (
      <div className="px-4 sm:px-6 lg:px-8 h-screen select-none p-4">
        <div className="sm:flex sm:items-center">
          <div className="sm:flex-auto">
            <h1 className="text-xl font-semibold text-gray-900">Transactions</h1>
            <p className="mt-2 text-sm text-gray-700">
             Transactions passed through the rubilink network
            </p>
          </div>
          <div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
          <div className="w-20 h-10 bg-blue-600 text-center justify-center align-middle hover:bg-blue-400 cursor-pointer ease-in-out duration-300 border rounded-lg p-1">
            <CSVLink className="text-center justify-center align-middle font-semibold text-sm text-white" data={rows} filename={`${current.getFullYear()} ${(current.getMonth()<10?'0':'') 1}${current.getDate()} ${(current.getHours()<10?'0':'')   current.getHours()}${(current.getMinutes()<10?'0':'')   current.getMinutes()}週末.csv`}>
                Download
            </CSVLink>
          </div>
          </div>
        </div>
        <div className="mt-8 flex flex-col">
          <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
              <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                <TableContainer component={Paper}>
                  <Table sx={{ minWidth: 650 }} aria-label='transactions'>
                    <TableBody>
                      {rows.map((row) => (
                        <TableRow
                        key={row.name}
                        sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                        >
                          <TableCell headers="hidden">
                            {row.misc}
                          </TableCell>
                          <TableCell align="left" headers="hidden">
                            {row.status}
                          </TableCell>
                          <TableCell align="left" headers="">
                            {row.amount}
                          </TableCell>
                          <TableCell align="left" headers="">
                            {row.balance}
                          </TableCell>
                          <TableCell align="left" headers="">
                            {row.standard}
                          </TableCell>
                        </TableRow>
                      ),
                       
                      )}
                    </TableBody>
                  </Table>
                </TableContainer>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

Is there a method to remove the multiple quotes and commas at the end of each data string?

CodePudding user response：

You may use

yourString.replaceAll('"', ''); to remove quote from your string
yourString.replaceAll(',', ''); to remove com from your string