ユーザー一覧のCSVダウンロード機能

components/users/DownloadCSV.tsx

@@ -0,0 +1,46 @@
+import { User } from "@/pages/api/user";
+import { Button } from "react-bootstrap";
+import { saveAs } from "file-saver";
+
+type Props = {
+  users: User[];
+};
+const DownloadCSV = ({ users }: Props) => {
+  const onClickDownload = () => {
+    const blob = new Blob(
+      [
+        users
+          .map((u, i) => {
+            let line = "";
+            if (i == 0) {
+              for (const key in u) {
+                line += key + ",";
+              }
+              line = line.slice(0, -1);
+              line += "\n";
+            }
+            const u2 = u as any;
+            for (const key in u2) {
+              line += u2[key] + ",";
+            }
+            line = line.slice(0, -1);
+            return line;
+          })
+          .join("\n"),
+      ],
+      {
+        type: "text/csv;charset=utf-8",
+      }
+    );
+    saveAs(blob, `users-${new Date().toLocaleDateString()}.csv`);
+  };
+  return (
+    <>
+      <Button onClick={onClickDownload} disabled={users.length == 0}>
+        CSVをダウンロード
+      </Button>
+    </>
+  );
+};
+
+export default DownloadCSV;

package.json

@@ -10,13 +10,15 @@
   },
   "dependencies": {
     "@next/font": "13.1.6",
+    "@types/file-saver": "^2.0.5",
     "@types/node": "18.11.19",
     "@types/react": "18.0.27",
     "@types/react-bootstrap": "^0.32.32",
     "@types/react-dom": "18.0.10",
     "bootstrap": "^5.2.3",
     "eslint": "8.33.0",
     "eslint-config-next": "13.1.6",
+    "file-saver": "^2.0.5",
     "mysql2": "^3.1.0",
     "next": "13.1.6",
     "react": "18.2.0",

pages/users.tsx

@@ -1,8 +1,9 @@
 import { queryDb } from "@/util/db";
 import { GetServerSideProps } from "next";
 import { useState } from "react";
-import { Container, Row, Form, Table } from "react-bootstrap";
+import { Container, Row, Form, Table, Col } from "react-bootstrap";
 import { User } from "./api/user";
+import DownloadCSV from "@/components/users/DownloadCSV";
 
 type Props = {
   users: User[];
@@ -52,8 +53,11 @@ const UsersPage = ({ users, error }: Props) => {
       ) : (
         <></>
       )}
-      <Row>
-        <div className="p-2">
+      <Row className="p-2">
+        <Col md={3} sm={4}>
+          <DownloadCSV users={users} />
+        </Col>
+        <Col md={8} sm={8} className="pt-2">
           {allTableDataTypes.map((t) => (
             <Form.Check
               defaultChecked={defaultTableDataTypes.includes(t)}
@@ -67,7 +71,7 @@ const UsersPage = ({ users, error }: Props) => {
               }}
             />
           ))}
-        </div>
+        </Col>
       </Row>
       <Row>
         <div className="overflow-auto">

yarn.lock

@@ -204,6 +204,11 @@
   dependencies:
     tslib "^2.4.0"
 
+"@types/file-saver@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.5.tgz#9ee342a5d1314bb0928375424a2f162f97c310c7"
+  integrity sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -960,6 +965,11 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"