Day-20 專案演練 - 輸出報表 react-csv

插播一個小巧可愛的功能，放鬆一下心情。把待辦清單輸出 csv 檔案，透過一個下載元件，只要輸入資料就能下載檔案了，幫檔案取個名字也是十分簡單，總體而言，使用 react-csv 來做輸出 csv 並不是一件難事，所以我在今天可以多說一點廢話(等一下)。

安裝與使用 react-csv

react-csv 的文件，這是個小套件，一頁裡面就寫的詳盡，總之先來安裝個 :

npm install react-csv --save;

在使用的時候只要看情況選擇要用<CSVDownload>還是<CSVLink>，在裡面放進 JSON 格式的資料，就能幫你產生一下輸出 CSV 的下載連結。

觀察程式碼

因為夠小，就近去看了一下程式碼，太大的套件反而不會想看 XD

react-csv 裡面有兩個元件，分別是 <CSVDownload>、<CSVLink>，共用一個核心功能 :

• core.js 裡面處理好檔案並且製作下載連結
• Download.js 可以新開下載視窗，且沒有渲染任何 UI 出來
• Link.js 是一個 <a>標籤，有支援非同步

在 ExportButton.tsx 中加入下載功能

來到 features 資料夾裡面的 ExportButton.tsx，幫它引入套件 :

import React from "react";
import { CSVLink, CSVDownload } from "react-csv";

因為輸出的資料是從 TodoPage 的 list 來的，所以要從 TodoPage 傳過來，增加型別資訊，並且放入 props :

type Props = {
  data: [];
};
const ExportButton: React.FC<Props> = ({ data }) => {
  return (
    ...
  );
};

完整如下 :

import React from "react";
import { CSVLink, CSVDownload } from "react-csv";

type Props = {
  data: [],
};

const ExportButton: React.FC<Props> = ({ data }) => {
  return (
    <div className="flex items-center">
      <svg
        width="25"
        height="25"
        viewBox="0 0 225 225"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M155.296 84.2473H140.412V37.4432C140.412 32.2948 136.2 28.0824 131.051 28.0824H93.6081C88.4597 28.0824 84.2473 32.2948 84.2473 37.4432V84.2473H69.3636C61.0325 84.2473 56.8201 94.3569 62.7174 100.254L105.684 143.22C109.334 146.871 115.232 146.871 118.882 143.22L161.848 100.254C167.746 94.3569 163.627 84.2473 155.296 84.2473ZM46.8041 177.855C46.8041 183.004 51.0164 187.216 56.1649 187.216H168.495C173.643 187.216 177.855 183.004 177.855 177.855C177.855 172.707 173.643 168.494 168.495 168.494H56.1649C51.0164 168.494 46.8041 172.707 46.8041 177.855Z"
          fill="black"
        />
      </svg>
      <CSVLink data={data}>
        <span className="ml-[8px]">下載報表</span>
      </CSVLink>
    </div>
  );
};

export default ExportButton;

取個直觀的名字

給輸出的檔案一個名字吧，因為只會輸出待辦清單，所以就這麼稱呼吧 :

<CSVLink
  data={data}
  filename={"我的待辦清單.csv"} // 這個
>
  <span className="ml-[8px]">下載報表</span>
</CSVLink>

repo

附上程式碼

結語

得到一個下載 csv 檔案的按鈕，因為不難所以很快就做完，感覺今天好偷懶啊，從昨天開始連續偷懶欸，接下來也許會稍微累一點，應該吧(?)