大家好，我是大澈！

今天分享一個(gè)開(kāi)發(fā)中比較常見(jiàn)的問(wèn)題，如何導(dǎo)出表格。

可以這么說(shuō)，只要頁(yè)面上有表格出現(xiàn)的地方，你就要做好實(shí)現(xiàn)導(dǎo)出功能的打算，因?yàn)槟阌肋h(yuǎn)不知道客戶(hù)要拿表格去做什么。

一、需求分析

1、需求

點(diǎn)擊紅色導(dǎo)出按鈕，將下方表格的內(nèi)容，導(dǎo)出為Excel文檔。

2、問(wèn)題

• xlsx庫(kù)和file-saver庫(kù)各自的作用
• 使用時(shí)的注意點(diǎn)
• XLSX.utils.table_to_book和XLSX.write的作用
• 
  

二、需求實(shí)現(xiàn)速覽

1、安裝依賴(lài)

npm install --save xlsx
npm install --save file-saver

2、編寫(xiě)導(dǎo)出Excel的公共方法

在公共方法文件utils.js中，放入如下代碼。

其中，exportExcel方法接受兩個(gè)參數(shù)，name是生成excel的文件名，tableName是表格的id。

// 導(dǎo)入依賴(lài)
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

/**
* 導(dǎo)出Excel表格
* @param name 生成excel的文件名，如：interestTable.xlsx
* @param tableName 表格的id，如：#tableId
* */
export const exportExcel = (name, tableName) => {
let sel = XLSX.utils.table_to_book(document.querySelector(tableName))
let selIn = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })

try {
FileSaver.saveAs(new Blob([selIn], { type: 'application/octet-stream' }), name)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, selIn)
}

return selIn
}

3、導(dǎo)入使用公共方法

<!-- 導(dǎo)出按鈕 -->
<el-button @click="exportExcel('interestTable.xlsx', '#tableId')">導(dǎo)出</el-button>

<!-- 表格 -->
<el-table id="tableId" :data="tableData" border style="width: 100%"></el-table>

// 導(dǎo)入指定公共方法
import { exportExcel } from "@/common/utils";

三、問(wèn)題答案詳解

1、xlsx庫(kù)和file-saver庫(kù)各自的作用

（1）xlsx庫(kù)

xlsx是一個(gè)流行的JavaScript庫(kù)，用于在瀏覽器中讀取、解析和生成Excel文件。它支持多種Excel文件格式，包括XLSX、XLS、CSV和ODS。你可以使用xlsx庫(kù)來(lái)創(chuàng)建、修改和操作工作簿、工作表、單元格等Excel文件中的元素。

（2）file-saver庫(kù)

file-saver是一個(gè)用于在瀏覽器中保存文件的JavaScript庫(kù)。它提供了一個(gè)簡(jiǎn)單的API，可以將數(shù)據(jù)保存為文件，并將其下載到用戶(hù)的本地計(jì)算機(jī)。file-saver庫(kù)通過(guò)創(chuàng)建一個(gè)Blob對(duì)象并觸發(fā)瀏覽器的文件下載功能來(lái)實(shí)現(xiàn)文件保存。

2、使用時(shí)的注意點(diǎn)

（1）瀏覽器兼容性

xlsx、file-saver庫(kù)依賴(lài)瀏覽器的Blob和FileSaver功能。大多數(shù)現(xiàn)代瀏覽器都支持這些功能，但是在某些舊版本或特定的移動(dòng)瀏覽器中可能不被支持。在使用前，請(qǐng)確保目標(biāo)瀏覽器支持Blob和FileSaver。

（2）數(shù)據(jù)格式

確保將數(shù)據(jù)正確轉(zhuǎn)換為適合x(chóng)lsx庫(kù)的格式。xlsx庫(kù)支持多種數(shù)據(jù)源，如JSON、數(shù)組和HTML表格。根據(jù)你的數(shù)據(jù)源，使用適當(dāng)?shù)姆椒▽⑵滢D(zhuǎn)換為工作表的格式。

（3）文件格式和選項(xiàng)

xlsx庫(kù)支持多種Excel文件格式，如XLSX、XLS、CSV和ODS。在使用XLSX.write函數(shù)時(shí)，可以設(shè)置不同的選項(xiàng)來(lái)指定生成的文件類(lèi)型、樣式、圖表等。查閱xlsx庫(kù)的文檔以了解更多選項(xiàng)和配置信息。

（4）大數(shù)據(jù)量處理

如果你要處理大量數(shù)據(jù)，尤其是在較舊或性能較低的設(shè)備上，可能會(huì)遇到性能問(wèn)題。在這種情況下，你可以考慮使用流式處理或分頁(yè)加載數(shù)據(jù)，以避免內(nèi)存消耗過(guò)大。

（5）錯(cuò)誤處理

在使用xlsx、file-saver庫(kù)時(shí)，要注意正確處理可能出現(xiàn)的錯(cuò)誤。例如，如果數(shù)據(jù)轉(zhuǎn)換失敗、保存文件失敗或?yàn)g覽器不支持所需功能，需要捕獲和處理這些錯(cuò)誤，并提供適當(dāng)?shù)姆答伣o用戶(hù)。

3、XLSX.utils.table_to_book和XLSX.write的作用

（1）XLSX.utils.table_to_book

XLSX.utils.table_to_book是xlsx庫(kù)中的一個(gè)函數(shù)，它的作用是將HTML表格轉(zhuǎn)換為Workbook對(duì)象。

在Excel文件中，Workbook是最高級(jí)別的對(duì)象，它包含了多個(gè)工作表（Worksheets）以及其他Excel文件的元數(shù)據(jù)。table_to_book函數(shù)的作用是將一個(gè)指定的HTML表格轉(zhuǎn)換為Workbook對(duì)象，以便進(jìn)一步操作和處理。

具體來(lái)說(shuō)，table_to_book函數(shù)將HTML表格的內(nèi)容和結(jié)構(gòu)解析為Workbook對(duì)象的結(jié)構(gòu)。它會(huì)將表格的每一行轉(zhuǎn)換為工作表（Worksheet）中的行，將表格的每一列轉(zhuǎn)換為工作表中的列，并將單元格的內(nèi)容、樣式等信息保存在對(duì)應(yīng)的位置上。

（2）XLSX.write

XLSX.write是xlsx庫(kù)中的一個(gè)函數(shù)，它的作用是將Workbook對(duì)象轉(zhuǎn)換為Excel文件的二進(jìn)制數(shù)據(jù)或文件流。

在Excel文件處理中，Workbook是最高級(jí)別的對(duì)象，它包含了多個(gè)工作表（Worksheets）以及其他Excel文件的元數(shù)據(jù)。XLSX.write函數(shù)的作用是將給定的Workbook對(duì)象轉(zhuǎn)換為Excel文件的二進(jìn)制數(shù)據(jù)，以便保存到本地或進(jìn)行其他處理。

具體來(lái)說(shuō)，XLSX.write函數(shù)接受兩個(gè)參數(shù)：

• workbook：要轉(zhuǎn)換為Excel文件的Workbook對(duì)象，它包含了要保存的數(shù)據(jù)、工作表結(jié)構(gòu)、樣式和其他元數(shù)據(jù)。
• options：一個(gè)可選的配置對(duì)象，用于指定轉(zhuǎn)換的選項(xiàng)，如文件類(lèi)型（例如XLSX、CSV）、文件的輸出格式（例如ArrayBuffer、BinaryString、Blob等）以及其他設(shè)置。默認(rèn)選項(xiàng)為{ type: 'array', bookType: 'xlsx' }，表示將Workbook對(duì)象轉(zhuǎn)換為XLSX格式的二進(jìn)制數(shù)據(jù)數(shù)組。