使用xlsx（用于将json数组转换为excel格式）时将日期从“dd-mm-yyyy hh:mm:ss”格式化为“dd-mm-yyyy”

Question

我正在使用 xlsx npm 将对象数组转换为 Excel 格式，然后将数据转换为 blob 并使用文件保护程序以 Excel 格式下载。在我的用户界面中，我有一个下载 Excel 的按钮

这是我通过 npx create-react-app 创建的一个简单的 React 项目。

我点击“下载”按钮来下载 Excel

这是我的代码（用于文件 app.js 文件）。

import { saveAs } from "file-saver";
import * as XLSX from "xlsx";

const EXCEL_TYPE =
  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
const EXCEL_EXTENSION = ".xlsx";
function App() {
  const downloadReport = () => {

    const data = [
      { data1: "2023-04-05T14:27:50.232Z" },
      { data1: "2023-04-08T14:27:50.232Z" },
    ];
    const ws = XLSX.utils.json_to_sheet(data);
    // I am looping through the data to change all the A cells i.e. A2 and A3. To set dates for them in the proper format I want
    data.forEach((item, index) => {
      // I am using index + 2 because index starts from 0, A1 is the main header data1(cell A1) which is not a date 
      // I need to change values A2 and A3. Loop runs twice for index 0 and 1 and we get index + 2 = 2 and 3
      //(Thus A2 and A3) for indexes 0 and 1 respectively
      const dateValue = new Date(ws[`A${index + 2}`].v);

      ws[`A${index + 2}`].t = "d";
      ws[`A${index + 2}`].v = dateValue.toLocaleDateString("en-US", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: undefined,
        minute: undefined,
        second: undefined,
        hour12: false,
        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
      });
      ws[`A${index + 2}`].z = "dd-mmm-yy;@"; 
      ws[`A${index + 2}`].s = {
        numFmt: "dd-mm-yyyy;@",
        formatCode: "dd-mm-yyyy;@",
      };
    });
    const wb = {
      Sheets: {
        data: ws,
      },
      SheetNames: ["data"],
    };
    const eb = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const blob = new Blob([eb], { type: EXCEL_TYPE });
    saveAs(blob, "file_" + EXCEL_EXTENSION);
  };
  return (
    <div className="App">
      <button onClick={downloadReport}>Download</button>
    </div>
  );
}

export default App;

这是我的package.json

{
  "name": "dummy-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "file-saver": "^2.0.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "xlsx": "^0.18.5",
    "xlsx-style": "^0.8.13"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

这就是我想要实现的目标：

当我下载 Excel 时，我应该能够查看像 22 年 8 月 2 日这样的日期，但是当我单击单元格时，单元格的值应该是 02-08-2022。

通过我的代码，我能够实现这一点：

为了查看 Excel，我可以获得正确的格式 23 年 4 月 5 日，但是当我单击单元格进行编辑时，我得到的是 05-04-2023 00:00:10。如何删除 00:00:10 即“hh:mm:ss”部分？

Answer 1

我也面临着同样的问题。如果此问题已解决，请告诉我。