前端導出 Excel 的方式

前言

前段時間，項目上有個需求需要将資料報表導出為 excel 的需求，這本來是後端的工作，前端隻需要一個 ​

​a​

​ 标簽，就可以下載下傳檔案，但不巧的是，正好遇到後端請假，而且項目比較着急，那麼前端是否可以實作呢？

實作方式

經過一頓搜尋後，發現有這麼幾個 npm 庫

• react-csv

  根據給定的資料生成 CSV 檔案，資料可以是二維數組、對象數組或字元串。

• xlsx

  進入 xlsx 官網，官網稱為 SheetJS，它支援浏覽器、nodejs、deno、和 react-native，浏覽器相容 ie10+。

  SheetJS 社群版提供經過實戰考驗的開源解決方案，用于從幾乎所有複雜的電子表格中提取有用的資料，并生成新的電子表格，這些新的電子表格可以與傳統軟體和現代軟體一起使用。

csv 與 Excel 的差別

從名字上看一個是導出 csv，一個是導出 excel，那麼這 2 者有什麼差別呢？

Excel 是一個電子表格，将檔案儲存為自己的專有格式，即 xls 或 xlsx，它儲存有關工作簿中所有工作表的資訊

CSV 代表 Comma Separated Values ，這是一個純文字格式，用逗号分隔一系列值，但不包含格式，公式，宏等，擴充名為.csv 的分隔文本檔案的格式

總結來說，Excel 不僅可以存儲資料，還可以對資料進行操作，CSV 檔案隻是一個文本檔案，它存儲資料，它也被稱為平面檔案，任何用于解析 Excel 資料的程式設計語言庫通常都會更大，更慢，更複雜，任何程式設計語言來解析 CSV 資料是微不足道的，生成它是非常容易的。

react-csv

實作代碼

import React from 'react';
import { CSVLink } from 'react-csv';

const headers = [
  { label: 'First Name', key: 'firstname' },
  { label: 'Last Name', key: 'lastname' },
  { label: 'Email', key: 'email' },
];

const data = [
  { firstname: 'Ahmed', lastname: 'Tomi', email: '[email protected]' },
  { firstname: 'Raed', lastname: 'Labes', email: '[email protected]' },
  { firstname: 'Yezzi', lastname: 'Min l3b', email: '[email protected]' },
];

export default function App() {
  return (
    <CSVLink data={data} headers={headers}>
      Download me
    </CSVLink>      

react-csv 使用非常簡單，隻需要 npm 安裝後就可以使用，使用 headers 字段可以指定表頭。

xlsx

xlsx 官網有資料導入、資料導出、資料處理等功能，非常強大，這裡我們隻處理資料到功能。

cdn 方式

1. 首先確定頁面上有一個表格，并且有一個唯一 ID:

<table id="TableToExport">      

1. 在頁面上引入 SheetJS

<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>      

1. 添加一個按鈕用于導出 Excel

<button id="sheetjsexport"><b>導出 XLSX</b></button>      

1. 綁定點選事件:

document.getElementById("sheetjsexport").addEventListener('click', function() {
  /*根據頁面上的表格建立工作表 */
  var wb = XLSX.utils.table_to_book(document.getElementById("TableToExport"));
  /* 導出檔案下載下傳 */
  XLSX.writeFile(wb, "SheetJSTable.xlsx");
});      

在 react 中使用

function Table2XLSX(props) {
  const xport = async () => {
      const table = document.getElementById("Table2XLSX");
      const wb = XLSX.utils.table_to_book(table);
      XLSX.writeFile(wb, "SheetJSTable.xlsx");
  };

  return (<>
    <table id="Table2XLSX"><tbody>
      <tr><td colSpan="3">SheetJS Table Export</td></tr>
      <tr><td>Author</td><td>ID</td><td>Note</td></tr>
      <tr><td>SheetJS</td><td>7262</td><td>Hi!</td></tr>
      <tr><td colSpan="3">
        <a href="//sheetjs.com">Powered by SheetJS</a>
      </td></tr>
    </tbody></table>
    <button onClick={xport}><b>Export XLSX!</b></button>
  </>);
}      

以上方法是将頁面上的表格轉為 excel，那麼能否跟 react-csv 一樣json 轉 excel 呢？

json 轉 excel

/**
 * 導出 excel 檔案
 * @param array JSON 數組
 * @param sheetName 第一張表名
 * @param
export function exportExcelFile(array=[], sheetName = 'sheet表', fileName = 'example.xlsx') {
  const jsonWorkSheet = xlsx.utils.json_to_sheet(array);
  const workBook = {
    SheetNames: [sheetName],
    Sheets: {
      [sheetName]: jsonWorkSheet,
    }
  };
  return xlsx.writeFile(workBook, fileName);
}      

<button
  disabled={dataSource.length === 0}
  onClick={() exportExcelFile(dataSource)}
>
  導出 Excel
</button>      

結語