當前位置：首頁 > news >正文

中國seo第一人網(wǎng)站優(yōu)化包括

news 2025/7/13 5:19:40

中國seo第一人,網(wǎng)站優(yōu)化包括,裝修網(wǎng)站建設公司,做網(wǎng)站教程第一課本文記錄在html中基于Handsontable.js Excel.js實現(xiàn)表格預覽、導出、帶公式單元格渲染功能，在這里我們在html中實現(xiàn)，當然也可以在vue、react等框架中使用npm下載導入依賴文件。 Handsontable官方文檔一、開發(fā)前的準備引入相關依賴庫 <!DOCTYPE ht…

本文記錄在html中基于Handsontable.js + Excel.js實現(xiàn)表格預覽、導出、帶公式單元格渲染功能，在這里我們在html中實現(xiàn)，當然也可以在vue、react等框架中使用npm下載導入依賴文件。

Handsontable官方文檔

一、開發(fā)前的準備引入相關依賴庫

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基于Handsontable.js + Excel.js實現(xiàn)表格預覽功能</title><!-- handsontable的css文件 https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css --><link rel="stylesheet" href="./lib/handsontable.full.min.css">
</head>
<body><!-- https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js --><script src="./lib/handsontable.full.min.js"></script><!-- https://cdn.jsdelivr.net/npm/handsontable/dist/languages/zh-CN.js --><script src="./lib/zh-CN.js"></script><!-- https://cdn.jsdelivr.net/npm/color-js --><script src="./lib/color-js.js"></script><!-- https://cdnjs.cloudflare.com/ajax/libs/hyperformula/1.4.0/hyperformula.min.js --><script src="./lib/hyperformula.full.min.js"></script><!-- https://cdn.jsdelivr.net/npm/exceljs/dist/exceljs.min.js --><script src="./lib/exceljs.min.js"></script><!-- https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js --><script src="./lib/xlsx.full.min.js"></script><!-- https://cdn.jsdelivr.net/npm/fxparser@1.0.0/dist/fxparser.min.js --><script src="./lib/fxparser.min.js"></script>
</body>
</html>

二、編寫頁面布局

<body><input type="file" id="file"><button id="btn">預覽</button><button id="export">導出</button>
</body>

三、編寫預覽核心代碼

<script>var hot; //handsontable實例var themeJson; //主題jsonvar sheet; //當前sheetvar Color = net.brehaut.Color; //引入color-js庫// 自定義渲染器函數(shù)function customRenderer(hotInstance, td, row, column, prop, value, cellProperties) {Handsontable.renderers.TextRenderer(hotInstance, td, row, column, prop, value, cellProperties);// 填充樣式if ("fill" in cellProperties) {// 背景顏色if ("fgColor" in cellProperties.fill && cellProperties.fill.fgColor) {td.style.background = getColor(cellProperties.fill.fgColor,  themeJson);}}// 字體樣式if ("font" in cellProperties) {// 加粗if ("bold" in cellProperties.font && cellProperties.font.bold) {td.style.fontWeight = "700";}// 字體顏色if ("color" in cellProperties.font && cellProperties.font.color) {td.style.color = getColor(cellProperties.font.color, themeJson);}// 字體大小if ("size" in cellProperties.font && cellProperties.font.size) {td.style.fontSize = cellProperties.font.size + "px";}// 字體類型if ("name" in cellProperties.font && cellProperties.font.name) {td.style.fontFamily = cellProperties.font.name;}// 字體傾斜if ("italic" in cellProperties.font && cellProperties.font.italic) {td.style.fontStyle = "italic";}// 下劃線if ("underline" in cellProperties.font &&cellProperties.font.underline) {// 其實還有雙下劃線，但是雙下劃綫css中沒有提供直接的設置方式，需要使用額外的css設置，所以我也就先懶得弄了td.style.textDecoration = "underline";// 刪除線if ("strike" in cellProperties.font && cellProperties.font.strike) {td.style.textDecoration = "underline line-through";}} else {// 刪除線if ("strike" in cellProperties.font && cellProperties.font.strike) {td.style.textDecoration = "line-through";}}}// 對齊if ("alignment" in cellProperties) {if ("horizontal" in cellProperties.alignment) {// 水平// 這里我直接用handsontable內置類做了，設置成類似htLeft的樣子。//（handsontable）其實至支持htLeft, htCenter, htRight, htJustify四種，但是其是它還有centerContinuous、distributed、fill，遇到這幾種就會沒有效果，也可以自己設置，但是我還是懶的弄了，用到的時候再說吧const name =cellProperties.alignment.horizontal.charAt(0).toUpperCase() +cellProperties.alignment.horizontal.slice(1);td.classList.add(`ht${name}`);}if ("vertical" in cellProperties.alignment) {// 垂直// 這里我直接用handsontable內置類做了，設置成類似htTop的樣子。const name =cellProperties.alignment.vertical.charAt(0).toUpperCase() +cellProperties.alignment.vertical.slice(1);td.classList.add(`ht${name}`);}}// 邊框if ("border" in cellProperties) {if ("left" in cellProperties.border && cellProperties.border.left) {// 左邊框const [borderWidth, borderStyle] = setBorder(cellProperties.border.left.style);let color = "";// console.log(row, column, borderWidth, borderStyle);if (cellProperties.border.left.color) {color = getColor(cellProperties.border.left.color, themeJson);}td.style.borderLeft = `${borderStyle} ${borderWidth} ${color}`;}if ("right" in cellProperties.border && cellProperties.border.right) {// 左邊框const [borderWidth, borderStyle] = setBorder(cellProperties.border.right.style);// console.log(row, column, borderWidth, borderStyle);let color = "";if (cellProperties.border.right.color) {color = getColor(cellProperties.border.right.color, themeJson);}td.style.borderRight = `${borderStyle} ${borderWidth} ${color}`;}if ("top" in cellProperties.border && cellProperties.border.top) {// 左邊框const [borderWidth, borderStyle] = setBorder(cellProperties.border.top.style);let color = "";// console.log(row, column, borderWidth, borderStyle);if (cellProperties.border.top.color) {color = getColor(cellProperties.border.top.color, themeJson);}td.style.borderTop = `${borderStyle} ${borderWidth} ${color}`;}if ("bottom" in cellProperties.border && cellProperties.border.bottom) {// 左邊框const [borderWidth, borderStyle] = setBorder(cellProperties.border.bottom.style);let color = "";// console.log(row, column, borderWidth, borderStyle);if (cellProperties.border.bottom.color) {color = getColor(cellProperties.border.bottom.color, themeJson);}td.style.borderBottom = `${borderStyle} ${borderWidth} ${color}`;}}}// 在 Handsontable 初始化之前注冊渲染器Handsontable.renderers.registerRenderer('customStylesRenderer', customRenderer);// 點擊預覽按鈕document.getElementById('btn').addEventListener('click', async function () {var hotData = null; // Handsontable 數(shù)據(jù)var file = document.getElementById('file').files[0]; // 獲取文件對象const workbook = new ExcelJS.Workbook(); // 創(chuàng)建一個工作簿對象await workbook.xlsx.load(file); // 加載Excel文件const worksheet = workbook.getWorksheet(1); // 獲取第一個工作表sheet = worksheet; // 將工作表賦值給全局變量// 遍歷工作表中的所有行（包括空行）const sheetData = [];worksheet.eachRow({ includeEmpty: true }, function (row, rowNumber) {const row_values = row.values.slice(1); // 獲取行數(shù)據(jù)，并排除第一列為null的數(shù)據(jù)const newRowValue = [...row_values];// 將行數(shù)據(jù)添加到sheetData數(shù)組中sheetData.push(newRowValue);});// 將數(shù)據(jù)賦值給HandsontablehotData = sheetData; // 將主題xml轉換成jsonconst themeXml = workbook._themes.theme1;const options = {ignoreAttributes: false,attributeNamePrefix: "_",};const parser = new XMLParser(options);const json = parser.parse(themeXml);themeJson = json// 獲取合并的單元格const mergeCells = [];for (let i in worksheet._merges) {const { top, left, bottom, right } = worksheet._merges[i].model;mergeCells.push({row: top - 1,col: left - 1,rowspan: bottom - top + 1,colspan: right - left + 1});};// 將數(shù)據(jù)加載到HyperFormulahot = new Handsontable(document.getElementById('hot'), {// 數(shù)據(jù)data: hotData,colHeaders: true,rowHeaders: true,language: 'zh-CN',readOnly: true,width: '100%',height: 'calc(100% - 25px)',//handsontable的許可證licenseKey: 'non-commercial-and-evaluation',// 行高rowHeights: function (index) {if (sheet.getRow(index + 1).height) {// exceljs獲取的行高不是像素值，事實上，它是23px - 13.8 的一個映射。所以需要將它轉化為像素值return sheet.getRow(index + 1).height * (23 / 13.8);}return 23; // 默認},// 列寬colWidths: function (index) {if (sheet.getColumn(index + 1).width) {// exceljs獲取的列寬不是像素值，事實上，它是81px - 8.22 的一個映射。所以需要將它轉化為像素值return sheet.getColumn(index + 1).width * (81 / 8.22);}return 81; // 默認},// 自定義單元格樣式cells: function (row, col, prop) {const cellProperties = {};const cellStyle = sheet.getCell(row + 1, col + 1).style;if (JSON.stringify(cellStyle) !== "{}") {// console.log(row+1, col+1, cellStyle);for (let key in cellStyle) {cellProperties[key] = cellStyle[key];}}return { ...cellProperties, renderer: "customStylesRenderer" };},// 合并單元格mergeCells: mergeCells});//8.將handsontable實例渲染到頁面上hot.render();});// 根據(jù)主題和明暗度themeId獲取顏色function getThemeColor(themeJson, themeId, tint) {let color = "";const themeColorScheme =themeJson["a:theme"]["a:themeElements"]["a:clrScheme"];switch (themeId) {case 0:color = themeColorScheme["a:lt1"]["a:sysClr"]["_lastClr"];break;case 1:color = themeColorScheme["a:dk1"]["a:sysClr"]["_lastClr"];break;case 2:color = themeColorScheme["a:lt2"]["a:srgbClr"]["_val"];break;case 3:color = themeColorScheme["a:dk2"]["a:srgbClr"]["_val"];break;default:color = themeColorScheme[`a:accent${themeId - 3}`]["a:srgbClr"]["_val"];break;}// 根據(jù)tint修改顏色深淺color = "#" + color;const colorObj = Color(color);if (tint) {if (tint > 0) {// 淡色color = colorObj.lighten(tint).hex();} else {// 深色color = colorObj.darken(Math.abs(tint)).hex();}}return color;}// 獲取顏色function getColor(obj, themeJson) {if ("argb" in obj) {// 標準色// rgba格式去掉前兩位: FFFF0000 -> FF0000return "#" + obj.argb.substring(2);} else if ("theme" in obj) {// 主題顏色if ("tint" in obj) {return getThemeColor(themeJson, obj.theme, obj.tint);} else {return getThemeColor(themeJson, obj.theme, null);}}}// 設置邊框function setBorder(style) {let borderStyle = "solid";let borderWidth = "1px";switch (style) {case "thin":borderWidth = "thin";break;case "dotted":borderStyle = "dotted";break;case "dashDot":borderStyle = "dashed";break;case "hair":borderStyle = "solid";break;case "dashDotDot":borderStyle = "dashed";break;case "slantDashDot":borderStyle = "dashed";break;case "medium":borderWidth = "2px";break;case "mediumDashed":borderStyle = "dashed";borderWidth = "2px";break;case "mediumDashDotDot":borderStyle = "dashed";borderWidth = "2px";break;case "mdeiumDashDot":borderStyle = "dashed";borderWidth = "2px";break;case "double":borderStyle = "double";break;case "thick":borderWidth = "3px";break;default:break;}// console.log(borderStyle, borderWidth);return [borderStyle, borderWidth];}
</script>

如下圖所示:

在這里插入圖片描述

通過以上代碼，我們成功將Excel文件中的數(shù)據(jù)、樣式、合并單元格等信息加載到了Handsontable中，并渲染到了頁面上。

對于單元格中帶有公式的，按照以上代碼會出現(xiàn)問題，就是帶有公式的單元格會渲染成"[object Object]"，如下圖所示:

請?zhí)砑訄D片描述

所以我們需要對公式進行處理，將公式替換為對應的值。請看以下處理公式的方法。

在遍歷單元格時我們可以打印看下讀取到單元格的數(shù)據(jù)具體是什么樣的，然后根據(jù)具體情況進行處理，如下圖所示:

在這里插入圖片描述
由圖可以看到帶有公式的單元格是一個對象，這就是帶有公式的單元格渲染后是"[object Object]"的原因。解決方法就是將帶有公式的單元格替換為對應的值，請看以下代碼:

worksheet.eachRow({ includeEmpty: true }, function (row, rowNumber) {const row_values = row.values.slice(1); // 獲取行數(shù)據(jù)，并排除第一列為null的數(shù)據(jù)const newRowValue = [...row_values];newRowValue.forEach(function(item, index) {if(Object.prototype.toString.call(item) === "[object Object]") {if(item.formula) {// 如果是公式，則保留公式，否則將結果作為值newRowValue[index] = item.formula.includes("=") ? item.formula : "=" + item.result;}};})sheetData.push(newRowValue);
});

通過處理后，帶有公示的單元格不在渲染為"[object Object]“，但是會渲染出具體使用了什么公式，如:”=SUM(B1:B2)“會渲染為”=2"，如下圖所示:

在這里插入圖片描述
解決方法請看以下代碼:

// 定義HyperFormula 公式配置配置
const hyperformulaInstance = HyperFormula.buildEmpty({licenseKey: 'internal-use-in-handsontable'
});
hot = new Handsontable(document.getElementById('hot'), {// 數(shù)據(jù)data: hotData,colHeaders: true,rowHeaders: true,language: 'zh-CN',readOnly: true,// 開啟公式formulas: {engine: hyperformulaInstance,sheetName: "Sheet1",},width: '100%',height: 'calc(100% - 25px)',//handsontable的許可證licenseKey: 'non-commercial-and-evaluation',
})

我們開啟公式后，帶有公示的單元格會渲染為對應的值，如下圖所示:

在這里插入圖片描述
至此，我們成功將Excel文件中的數(shù)據(jù)、樣式、合并單元格等信息加載到了Handsontable中，并渲染到了頁面上。

使用Handsontable導出Excel文件，請看以下代碼:

// 將handsontable實例導出為excel文件
document.getElementById('export').addEventListener('click', function () {var exportData = Handsontable.helper.createEmptySpreadsheetData(100, 100);hot.getData().forEach(function (row, rowIndex) {row.forEach(function (cell, colIndex) {exportData[rowIndex][colIndex] = cell;});});var workbook = XLSX.utils.book_new();var worksheet = XLSX.utils.aoa_to_sheet(exportData);XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');XLSX.writeFile(workbook, 'export.xlsx');
});

此處貼出整體代碼

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基于Handsontable.js + Excel.js實現(xiàn)表格預覽功能</title><!-- handsontable的css文件 https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css --><link rel="stylesheet" href="./lib/handsontable.full.min.css"><style>* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}</style>
</head><body><input type="file" id="file"><button id="btn">預覽</button><button id="export">導出</button><!-- handsontable的容器 --><div id="hot"></div><!-- https://cdn.jsdelivr.net/npm/color-js --><script src="./lib/color-js.js"></script><!-- https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js --><script src="./lib/handsontable.full.min.js"></script><!-- https://cdn.jsdelivr.net/npm/handsontable/dist/languages/zh-CN.js --><script src="./lib/zh-CN.js"></script><!-- https://cdnjs.cloudflare.com/ajax/libs/hyperformula/1.4.0/hyperformula.min.js --><script src="./lib/hyperformula.full.min.js"></script><!-- https://cdn.jsdelivr.net/npm/exceljs/dist/exceljs.min.js --><script src="./lib/exceljs.min.js"></script><!-- https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js --><script src="./lib/xlsx.full.min.js"></script><!-- https://cdn.jsdelivr.net/npm/fxparser@1.0.0/dist/fxparser.min.js --><script src="./lib/fxparser.min.js"></script><script>//在html中使用excel+handsontable實現(xiàn)excel預覽功能window.onload = function () {//1.引入handsontable的css和js文件//3.獲取excel文件var hot; //handsontable實例var themeJson; //主題jsonvar sheet; //當前sheetvar Color = net.brehaut.Color; //引入color-js庫// 自定義渲染器函數(shù)function customRenderer(hotInstance, td, row, column, prop, value, cellProperties) {Handsontable.renderers.TextRenderer(hotInstance, td, row, column, prop, value, cellProperties);// 填充樣式if ("fill" in cellProperties) {// 背景顏色if ("fgColor" in cellProperties.fill && cellProperties.fill.fgColor) {td.style.background = getColor(cellProperties.fill.fgColor,themeJson);}}// 字體樣式if ("font" in cellProperties) {// 加粗if ("bold" in cellProperties.font && cellProperties.font.bold) {td.style.fontWeight = "700";}// 字體顏色if ("color" in cellProperties.font && cellProperties.font.color) {td.style.color = getColor(cellProperties.font.color, themeJson);}// 字體大小if ("size" in cellProperties.font && cellProperties.font.size) {td.style.fontSize = cellProperties.font.size + "px";}// 字體類型if ("name" in cellProperties.font && cellProperties.font.name) {td.style.fontFamily = cellProperties.font.name;}// 字體傾斜if ("italic" in cellProperties.font && cellProperties.font.italic) {td.style.fontStyle = "italic";}// 下劃線if ("underline" in cellProperties.font &&cellProperties.font.underline) {// 其實還有雙下劃線，但是雙下劃綫css中沒有提供直接的設置方式，需要使用額外的css設置，所以我也就先懶得弄了td.style.textDecoration = "underline";// 刪除線if ("strike" in cellProperties.font && cellProperties.font.strike) {td.style.textDecoration = "underline line-through";}} else {// 刪除線if ("strike" in cellProperties.font && cellProperties.font.strike) {td.style.textDecoration = "line-through";}}}// 對齊if ("alignment" in cellProperties) {if ("horizontal" in cellProperties.alignment) {// 水平// 這里我直接用handsontable內置類做了，設置成類似htLeft的樣子。//（handsontable）其實至支持htLeft, htCenter, htRight, htJustify四種，但是其是它還有centerContinuous、distributed、fill，遇到這幾種就會沒有效果，也可以自己設置，但是我還是懶的弄了，用到的時候再說吧const name = cellProperties.alignment.horizontal.charAt(0).toUpperCase() +cellProperties.alignment.horizontal.slice(1);td.classList.add(`ht${name}`);}if ("vertical" in cellProperties.alignment) {// 垂直// 這里我直接用handsontable內置類做了，設置成類似htTop的樣子。const name =cellProperties.alignment.vertical.charAt(0).toUpperCase() +cellProperties.alignment.vertical.slice(1);td.classList.add(`ht${name}`);}}// 邊框if ("border" in cellProperties) {if ("left" in cellProperties.border && cellProperties.border.left) {// 左邊框const [borderWidth, borderStyle] = setBorder(cellProperties.border.left.style);let color = "";// console.log(row, column, borderWidth, borderStyle);if (cellProperties.border.left.color) {color = getColor(cellProperties.border.left.color, themeJson);}td.style.borderLeft = `${borderStyle} ${borderWidth} ${color}`;}if ("right" in cellProperties.border && cellProperties.border.right) {// 左邊框const [borderWidth, borderStyle] = setBorder(cellProperties.border.right.style);// console.log(row, column, borderWidth, borderStyle);let color = "";if (cellProperties.border.right.color) {color = getColor(cellProperties.border.right.color, themeJson);}td.style.borderRight = `${borderStyle} ${borderWidth} ${color}`;}if ("top" in cellProperties.border && cellProperties.border.top) {// 左邊框const [borderWidth, borderStyle] = setBorder(cellProperties.border.top.style);let color = "";// console.log(row, column, borderWidth, borderStyle);if (cellProperties.border.top.color) {color = getColor(cellProperties.border.top.color, themeJson);}td.style.borderTop = `${borderStyle} ${borderWidth} ${color}`;}if ("bottom" in cellProperties.border && cellProperties.border.bottom) {// 左邊框const [borderWidth, borderStyle] = setBorder(cellProperties.border.bottom.style);let color = "";// console.log(row, column, borderWidth, borderStyle);if (cellProperties.border.bottom.color) {color = getColor(cellProperties.border.bottom.color, themeJson);}td.style.borderBottom = `${borderStyle} ${borderWidth} ${color}`;}}}// 在 Handsontable 初始化之前注冊渲染器Handsontable.renderers.registerRenderer('customStylesRenderer', customRenderer);// 點擊預覽document.getElementById('btn').addEventListener('click', async function () {var hotData = null; // Handsontable 數(shù)據(jù)var file = document.getElementById('file').files[0]; // 獲取文件對象const workbook = new ExcelJS.Workbook(); // 創(chuàng)建一個工作簿對象await workbook.xlsx.load(file); // 加載Excel文件const worksheet = workbook.getWorksheet(1); // 獲取第一個工作表sheet = worksheet; // 將工作表賦值給全局變量// 遍歷工作表中的所有行（包括空行）const sheetData = [];worksheet.eachRow({ includeEmpty: true }, function (row, rowNumber) {const row_values = row.values.slice(1); // 獲取行數(shù)據(jù)，并排除第一列為null的數(shù)據(jù)const newRowValue = [...row_values];newRowValue.forEach(function(item, index) {if(Object.prototype.toString.call(item) === "[object Object]") {if(item.formula) {// 如果是公式，則保留公式，否則將結果作為值newRowValue[index] = item.formula.includes("=") ? item.formula : "=" + item.result;}};})sheetData.push(newRowValue);});// 將數(shù)據(jù)賦值給HandsontablehotData = sheetData; // 將主題xml轉換成jsonconst themeXml = workbook._themes.theme1;const options = {ignoreAttributes: false,attributeNamePrefix: "_",};const parser = new XMLParser(options);const json = parser.parse(themeXml);themeJson = json// 獲取合并的單元格const mergeCells = [];for (let i in worksheet._merges) {const { top, left, bottom, right } = worksheet._merges[i].model;mergeCells.push({row: top - 1,col: left - 1,rowspan: bottom - top + 1,colspan: right - left + 1,});};// 定義HyperFormula配置const hyperformulaInstance = HyperFormula.buildEmpty({licenseKey: 'internal-use-in-handsontable'});// 將數(shù)據(jù)加載到HyperFormulahot = new Handsontable(document.getElementById('hot'), {// 數(shù)據(jù)data: hotData,colHeaders: true,rowHeaders: true,language: 'zh-CN',readOnly: true,// 公式formulas: {engine: hyperformulaInstance,sheetName: "Sheet1",},width: '100%',height: 'calc(100% - 25px)',//handsontable的許可證licenseKey: 'non-commercial-and-evaluation',// 行高rowHeights: function (index) {if (sheet.getRow(index + 1).height) {// exceljs獲取的行高不是像素值，事實上，它是23px - 13.8 的一個映射。所以需要將它轉化為像素值return sheet.getRow(index + 1).height * (23 / 13.8);}return 23; // 默認},// 列寬colWidths: function (index) {if (sheet.getColumn(index + 1).width) {// exceljs獲取的列寬不是像素值，事實上，它是81px - 8.22 的一個映射。所以需要將它轉化為像素值return sheet.getColumn(index + 1).width * (81 / 8.22);}return 81; // 默認},// 自定義單元格樣式cells: function (row, col, prop) {const cellProperties = {};const cellStyle = sheet.getCell(row + 1, col + 1).style;if (JSON.stringify(cellStyle) !== "{}") {// console.log(row+1, col+1, cellStyle);for (let key in cellStyle) {cellProperties[key] = cellStyle[key];}}return { ...cellProperties, renderer: "customStylesRenderer" };},// 合并單元格mergeCells: mergeCells});//將handsontable實例渲染到頁面上hot.render();});// 將handsontable實例導出為excel文件document.getElementById('export').addEventListener('click', function () {var exportData = Handsontable.helper.createEmptySpreadsheetData(100, 100);hot.getData().forEach(function (row, rowIndex) {row.forEach(function (cell, colIndex) {exportData[rowIndex][colIndex] = cell;});});var workbook = XLSX.utils.book_new();var worksheet = XLSX.utils.aoa_to_sheet(exportData);XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');XLSX.writeFile(workbook, 'export.xlsx');});// 根據(jù)主題和明暗度themeId獲取顏色function getThemeColor(themeJson, themeId, tint) {let color = "";const themeColorScheme = themeJson["a:theme"]["a:themeElements"]["a:clrScheme"];switch (themeId) {case 0:color = themeColorScheme["a:lt1"]["a:sysClr"]["_lastClr"];break;case 1:color = themeColorScheme["a:dk1"]["a:sysClr"]["_lastClr"];break;case 2:color = themeColorScheme["a:lt2"]["a:srgbClr"]["_val"];break;case 3:color = themeColorScheme["a:dk2"]["a:srgbClr"]["_val"];break;default:color = themeColorScheme[`a:accent${themeId - 3}`]["a:srgbClr"]["_val"];break;}// 根據(jù)tint修改顏色深淺color = "#" + color;const colorObj = Color(color);if (tint) {if (tint > 0) {// 淡色color = colorObj.lighten(tint).hex();} else {// 深色color = colorObj.darken(Math.abs(tint)).hex();}}return color;}// 獲取顏色function getColor(obj, themeJson) {if ("argb" in obj) {// 標準色// rgba格式去掉前兩位: FFFF0000 -> FF0000return "#" + obj.argb.substring(2);} else if ("theme" in obj) {// 主題顏色if ("tint" in obj) {return getThemeColor(themeJson, obj.theme, obj.tint);} else {return getThemeColor(themeJson, obj.theme, null);}}}// 設置邊框function setBorder(style) {let borderStyle = "solid";let borderWidth = "1px";switch (style) {case "thin":borderWidth = "thin";break;case "dotted":borderStyle = "dotted";break;case "dashDot":borderStyle = "dashed";break;case "hair":borderStyle = "solid";break;case "dashDotDot":borderStyle = "dashed";break;case "slantDashDot":borderStyle = "dashed";break;case "medium":borderWidth = "2px";break;case "mediumDashed":borderStyle = "dashed";borderWidth = "2px";break;case "mediumDashDotDot":borderStyle = "dashed";borderWidth = "2px";break;case "mdeiumDashDot":borderStyle = "dashed";borderWidth = "2px";break;case "double":borderStyle = "double";break;case "thick":borderWidth = "3px";break;default:break;}// console.log(borderStyle, borderWidth);return [borderStyle, borderWidth];}}</script>
</body></html>