JS導出Excel文件

JS導出Excel文件

  大家在日常開發的過程中，尤其是B端的項目，很可能會碰到這個需求，將某個表格中的數據，或者是后端傳輸的數據，作為一個Excel文件進行導出保存。

  我們不可能為每次的突然出現的需求，都重寫一次函數，所以我們可以寫一個一直可用的公共方法來滿足這個“導出”層面的需求，那么我們的函數大概需要注意以下幾點：

• 允許兼容大部分Excel格式，例如xslx、xls、csv等
• 數據易於導入
• 自定義的文件名及后綴
• 低版本兼容

  對於以上幾點，CSV是一個很好的缺省格式，當使用時未指定格式時，默認使用CSV進行導出，因為xslx、xls可能會有編碼問題，它是二進制的文件，而CSV是文本文件，用記事本即可打開。數據導入我選擇標題及內部數據拆開，使用數組導入，這樣會更加靈活。對於低版本導入，這邊選擇的是JS中的Blob對象，這是一個二進制大對象，可以用於保存二進制數據並使用a標簽模擬點擊進行下載，在各大瀏覽器，Blob都是有很好的兼容性的，所以基本可以放心使用，這意味着不止React等框架，簡單的H5C3頁面也是可以使用Blob進行Excel導出的，這里把我的代碼貼出，希望能對大家有幫助，必要的注釋已經額外在其中補充了。

export const excelExport = ({ dataSource = [], titles = [], fileName = 'data', suffix = 'csv' }) => {

  var dataType = "\uFEFF"; //解決亂碼問題
  dataType += titles.join(',');  //添加表格的頭
  dataType += '\n'; // 以上是導出的Excel文件頭部

  // 從dataSource中取出數據存入數據源（dataType）
  dataSource.map(item => dataType += `${item.join(',')}\n`); 

  // 使用Blob，獲得二進制實例
  const csvData = new Blob([dataType], {
    type: 'text/csv'
  });

  // 創建a標簽
  const _a = document.createElement('a');
  /**
  * URL.createObjectURL() 靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的URL
  * 這里相當於為a標簽添加了一個下載地址
  */
  _a.href = URL.createObjectURL(csvData);
  // 該a標簽點擊后會打開新的標簽頁，人機交互會更加舒適
  _a.target = '_blank';
  // 為a標簽規定被下載的超鏈接目標
  _a.download = `${fileName}.${suffix}`;
  // 將這個制作好的a標簽置入body，並在點擊之后移除，降低外界感知
  document.body.appendChild(_a);
  _a.click();
  document.body.removeChild(_a);
}

  既然已經展示了我自己的一個導出函數，那么這里也舉個例去使用這個函數。這里的情景是一個最簡單的導出，需要導出所有的title、data為csv文件。（React代碼）

// 這里一般的情況是可以用來保存Table中被選中的項
const [selectedRows, setSelectedRows] = useState<SelectedProps[]>([
  { name: '喬布斯', age: 18 },
  { name: '米卡', age: 21 },
  { name: '起飛', age: 24 },
]);

const column = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: 200,
  }, {
    title: '年齡',
    dataIndex: 'age',
    width: 200,
  }];

// 值得注意的是，由於Excel是二維數據，所以我們的dataSource使用了二維數組去承載數據
excelExport({
  fileName: '表格數據',
  suffix: 'csv',
  titles: column.map(item => item.title),
  dataSource: selectedRows.map(({ name, age }) => [name, age])
})

  這里大家可以根據自己的具體業務邏輯去編寫代碼，希望對大家有所幫助～