excelHtml5

建立並儲存一個包含表格資料的 Excel XLSX 檔案 (HTML5)。
請注意 - 此屬性需要 DataTables 的 Buttons 擴充功能。

說明

此按鈕為終端使用者提供將表格資料儲存到本地建立的 Excel XLSX 檔案中的能力。

如果導入模組，則必須在頁面上提供 JSZip 函式庫，或向 DataTable.Buttons.jszip() 註冊。JSZip 是一個 MIT 授權的函式庫，提供在瀏覽器中建立 ZIP 檔案的功能，這是建立有效的 XLSX 檔案所必需的。

目前，雖然會建立 XLSX 檔案，但資料格式、顏色等不會保留。匯出的檔案中僅包含表格的原始資料。為了完全控制產生的檔案，可以使用 SheetJS 函式庫建構自訂按鈕。

如果您的表格標頭或頁尾有多個列，這些列都將包含在匯出中。如果標頭或頁尾包含 colspan 或 rowspan 的儲存格，它們將自動遷移到 Excel 文件中以進行匯出。

自訂

Buttons 建立的 Excel 檔案有意地非常簡單 - 預設樣式為

• Calibri 字型，大小 11 (與 Excel 預設值相符)
• 標頭和頁尾為粗體
• 欄寬會自動調整大小以符合其內容 (最小值：5，最大值：52)

但是，您可能希望在文件中新增其他資訊或格式，以滿足您的輸出需求。此功能由此按鈕類型的 customize 選項提供。

customize 方法會傳遞一個參數 - 一個具有以下結構的物件 (請注意，xml 僅僅是一個代表 XML 文件的佔位符 - 當然，每個 XML 文件都不同)

{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}

如果您之前使用過 XLSX 檔案進行開發，您會注意到此物件的結構模仿 XLSX 檔案的檔案結構。壓縮後，此檔案結構將建立一個 XLSX 檔案 - 這正是此按鈕類型所做的。customize 方法為您提供了修改其中任何 XML 文件，甚至新增額外檔案的能力 (這些檔案會在結構中自動偵測到，並將包含在 zip 中)。

舉例來說，讓我們修改儲存格 A1 中顯示的文字

customize: function ( xlsx ) {
    var sheet = xlsx.xl.worksheets['sheet1.xml'];

    $('c[r=A1] t', sheet).text( 'Custom text' );
}

在第二行，我們取得用於試算表資料的 XML 文件。然後在第四行，使用一小段 jQuery 來選取正確儲存格的文字節點 ( c 元素的 r 屬性是儲存格將顯示的位置，而 t 元素是文字節點)。然後設定儲存格的文字。如果您喜歡，也可以隨時使用 DOM 方法。

我們可以採用類似的方法來自訂文件中儲存格的樣式。這是透過將 s 屬性新增至 c 元素來完成，其中屬性值是您想要使用的樣式索引。Buttons 建立的 XLSX 檔案具有許多內建樣式，這些樣式記錄如下。

這只是如何自訂 XLSX 檔案的簡要摘要。XLSX 檔案格式及其功能的完整詳細資訊不在本文件的範圍內。有關詳細資訊，請參閱 Microsoft 和 Office Open XML 文件。

內建樣式

以下索引可從 Editor XLSX 樣式檔案中預先定義的樣式取得。這些索引可以套用至產生的試算表中的任何儲存格，以變更其外觀。

• 0 - 一般文字
• 1 - 白色文字
• 2 - 粗體
• 3 - 斜體
• 4 - 底線
• 5 - 一般文字，灰色背景
• 6 - 白色文字，灰色背景
• 7 - 粗體，灰色背景
• 8 - 斜體，灰色背景
• 9 - 底線，灰色背景
• 10 - 一般文字，紅色背景
• 11 - 白色文字，紅色背景
• 12 - 粗體，紅色背景
• 13 - 斜體，紅色背景
• 14 - 底線，紅色背景
• 15 - 一般文字，綠色背景
• 16 - 白色文字，綠色背景
• 17 - 粗體，綠色背景
• 18 - 斜體，綠色背景
• 19 - 底線，綠色背景
• 20 - 一般文字，藍色背景
• 21 - 白色文字，藍色背景
• 22 - 粗體，藍色背景
• 23 - 斜體，藍色背景
• 24 - 底線，藍色背景
• 25 - 一般文字，黑色細邊框
• 26 - 白色文字，黑色細邊框
• 27 - 粗體，黑色細邊框
• 28 - 斜體，黑色細邊框
• 29 - 底線，黑色細邊框
• 30 - 一般文字，灰色背景，黑色細邊框
• 31 - 白色文字，灰色背景，黑色細邊框
• 32 - 粗體，灰色背景，黑色細邊框
• 33 - 斜體，灰色背景，黑色細邊框
• 34 - 底線，灰色背景，黑色細邊框
• 35 - 一般文字，紅色背景，黑色細邊框
• 36 - 白色文字，紅色背景，黑色細邊框
• 37 - 粗體，紅色背景，黑色細邊框
• 38 - 斜體，紅色背景，黑色細邊框
• 39 - 底線，紅色背景，黑色細邊框
• 40 - 一般文字，綠色背景，黑色細邊框
• 41 - 白色文字，綠色背景，黑色細邊框
• 42 - 粗體，綠色背景，黑色細邊框
• 43 - 斜體，綠色背景，黑色細邊框
• 44 - 底線，綠色背景，黑色細邊框
• 45 - 一般文字，藍色背景，黑色細邊框
• 46 - 白色文字，藍色背景，黑色細邊框
• 47 - 粗體，藍色背景，黑色細邊框
• 48 - 斜體，藍色背景，黑色細邊框
• 49 - 底線，藍色背景，黑色細邊框
• 50 - 文字靠左對齊 (自 1.2.2 起)
• 51 - 文字置中對齊 (自 1.2.2 起)
• 52 - 文字靠右對齊 (自 1.2.2 起)
• 53 - 文字兩端對齊 (自 1.2.2 起)
• 54 - 文字旋轉 90° (自 1.2.2 起)
• 55 - 文字自動換行 (自 1.2.2 起)
• 56 - 百分比整數值 (由按鈕自動偵測和使用 - 自 1.2.3 起)
• 57 - 美元貨幣值 (由按鈕自動偵測和使用 - 自 1.2.3 起)
• 58 - 英鎊貨幣值 (由按鈕自動偵測和使用 - 自 1.2.3 起)
• 59 - 歐元貨幣值 (由按鈕自動偵測和使用 - 自 1.2.3 起)
• 60 - 小數點後 1 位數的百分比 (由按鈕自動偵測和使用 - 自 1.2.3 起)
• 61 - 以括號表示的負數 (由按鈕自動偵測和使用 - 自 1.2.3 起)
• 62 - 以括號表示的負數 - 小數點後 2 位數 (由按鈕自動偵測和使用 - 自 1.2.3 起)
• 63 - 帶有千位分隔符的數字 (由按鈕自動偵測和使用 - 自 1.2.3 起)
• 64 - 帶有千位分隔符的數字 - 小數點後 2 位數 (由按鈕自動偵測和使用 - 自 1.2.3 起)
• 65 - 不帶千位分隔符的數字 (由按鈕自動偵測和使用 - 自 1.2.4 起)
• 66 - 不帶千位分隔符的數字 - 小數點後 2 位數 (由按鈕自動偵測和使用 - 自 1.2.4 起)

注意事項

• 灰色是 #d9d9d9
• 紅色是 #d99795
• 綠色是 #6efce
• 藍色是 #c6cfef

選項

除了所有按鈕可用的選項 (例如 buttons.buttons.text) 之外，此按鈕在其組態物件中可以設定以下選項來自訂其動作和顯示方式

範例

new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: ['excelHtml5']
		}
	}
});

new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: ['excel']
		}
	}
});

new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: [
				{
					extend: 'excelHtml5',
					text: 'Save current page',
					exportOptions: {
						modifier: {
							page: 'current'
						}
					}
				}
			]
		}
	}
});

new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: [
				{
					extend: 'excelHtml5',
					autoFilter: true
				}
			]
		}
	}
});