全銀データをcsvを書き出す (next.js)

全銀データをcsvを書き出す処理を実装したのでメモや他の方にも役に立つと思い、残しておきます

技術スタック

• next.js
• firebase

1. ライブラリを入れる

yarn add encoding-japanese
yarn add papaparse

memo
@see 全銀データのフォーマットは下記です
https://www.rakuten-bank.co.jp/business/howto/pdf/h07_06_10.pdf

コード

import type { NextPage } from "next";
import { useEffect, useState } from "react";
import styles from "../styles/Home.module.css";
import Papa from "papaparse";
import Encoding from "encoding-japanese";

const Home: NextPage = ( ) => {

//　今回firebaseを使っているのでこのような取り出し方になってます

  const getBankData = async () => {
// 振込先のリスト
    const bankList: DocumentData[] = [];
    Data.forEach(async (value) => {
      bankList.push([
        "2",
        value.bank.code, 
        value.bank.brunch,
        value.bank.type,
        value.bank.number,
        value.bank.name,
        "送金金額",
        `00${instructorList .length + 1}`,
      ]); 
    });

// 振り込む銀行情報
const companyBank =  [
        "1",
        "21",
        "0",
        "01123467",
        "ｶﾌﾞｼｷｶﾞｲｼｬxxxx",
        "0930",
        "0036",
        "251",
        "1",
        "1243453",
      ],

    return
      company,
      ...bankList,
      ["8", `${bankList.length}`, '合計金額', "9"], // 合計金額や件数
    ];
  };

  const csvExport = async () => {
    const backData = await getBankData();
    const config = {
      delimiter: ",", // 区切り文字
      header: true, // キーをヘッダーとして扱う
      newline: "\r\n", // 改行
    };

    // 区切り文字へ変換
    const delimiterString = Papa.unparse(backData, config);

    // blodへの変換
    const strArray = Encoding.stringToCode(delimiterString);
    const convertedArray = Encoding.convert(strArray, "UTF8", "UNICODE");
    const UintArray = new Uint8Array(convertedArray);
    const blob = new Blob([UintArray], { type: "text/csv" });

    // download
    const link = document.createElement("a");
    link.href = window.URL.createObjectURL(blob);
    link.download = `back.csv`;
    link.click();
  };

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <button onClick={csvExport}>全銀データエクスポート</button>
      </main>
    </div>
  );
};

export default Home;