一、尋找合適的線上預覽Excel的js庫 我: 線上預覽Excel文件有哪些好用的js庫 ChatGPT: 有幾個好用的JavaScript庫可以用來在網頁上實現線上預覽Excel文件。以下是一些常見且功能強大的庫: SheetJS (xlsx.js): 這是一個功能強大的庫,可以在網頁上實現Exc ...
一、尋找合適的線上預覽Excel的js庫
我: 線上預覽Excel文件有哪些好用的js庫
ChatGPT: 有幾個好用的JavaScript庫可以用來在網頁上實現線上預覽Excel文件。以下是一些常見且功能強大的庫:
-
SheetJS (xlsx.js): 這是一個功能強大的庫,可以在網頁上實現Excel文件的讀取、寫入和預覽。它支持多種Excel格式,包括XLSX、XLS、CSV等。你可以使用SheetJS來讀取Excel文件內容,並將其呈現在網頁上的HTML表格中。
-
Handsontable: Handsontable是一個用於創建豐富互動式表格的庫,支持Excel樣式的編輯和查看功能。它可以將Excel文件內容以表格的形式呈現在網頁上,用戶可以編輯和查看數據。該庫還提供了很多定製和擴展的選項。
-
DHTMLX Spreadsheet: 這是一個基於JavaScript的電子錶格庫,支持Excel樣式的功能,包括公式、格式化、排序、篩選等。它可以在網頁上呈現Excel文件,並提供與電子錶格相關的功能。
-
ExcelJS: ExcelJS是一個用於讀取、創建和修改Excel文件的庫,可以在網頁上進行操作。它支持XLSX格式,允許你生成Excel文件,並支持多種單元格格式。
-
FlexGrid: Wijmo FlexGrid是一個功能強大的網格控制項,支持Excel樣式的功能,如排序、篩選、分組等。它可以用於在網頁上呈現Excel文件,並提供類似於Excel的交互體驗。
這些庫中的每一個都有其獨特的特點和優勢,根據你的需求和項目的要求,你可以選擇適合的庫來實現線上預覽Excel文件功能。
二、基礎版實現代碼
<script> (async() => { /* replace with the URL of the file */ const URL_TO_DOWNLOAD = "https://sheetjs.com/pres.numbers"; const ab = await (await fetch(URL_TO_DOWNLOAD)).arrayBuffer(); /* Parse file and get first worksheet */ const wb = XLSX.read(ab); const wsname = wb.SheetNames[0]; const ws = wb.Sheets[wsname]; /* Generate HTML */ var output = document.getElementById("TableContainer"); output.innerHTML = XLSX.utils.sheet_to_html(ws); })(); </script>
三、增強版實現代碼,支持單元格格式等
由於基礎實現丟失了很多關鍵格式信息,比如字體大小、背景色、對齊方式、批註等。於是請教ChatGpt幫忙寫代碼。下麵是ChatGpt寫出來的代碼,正確與否待驗證
<!DOCTYPE html> <html> <head> <title>Excel Online Preview</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script> <style> /* 根據需要設置單元格樣式 */ .cell { padding: 5px; border: 1px solid #ccc; font-family: Arial, sans-serif; } </style> </head> <body> <button id="loadExcelButton">載入Excel</button> <div id="excelPreview"></div> <script> document.getElementById('loadExcelButton').addEventListener('click', function() { fetchExcelData(); }); function fetchExcelData() { fetch('URL_OF_YOUR_BACKEND_API') .then(response => response.arrayBuffer()) .then(data => { var workbook = XLSX.read(new Uint8Array(data), { type: 'array' }); var sheetName = workbook.SheetNames[0]; var sheet = workbook.Sheets[sheetName]; var cellData = XLSX.utils.sheet_to_json(sheet, { header: 1 }); var htmlTable = '<table>'; for (var row = 0; row < cellData.length; row++) { htmlTable += '<tr>'; for (var col = 0; col < cellData[row].length; col++) { var cellValue = cellData[row][col]; var cellRef = XLSX.utils.encode_cell({ r: row, c: col }); var cell = sheet[cellRef]; var cellStyle = cell ? cell.s : {}; var cellStyleAttr = 'style="' + getCellStyle(cellStyle) + '"'; var mergeAttr = getMergeAttributes(sheet, row, col); var comment = getCellComment(cell); var cellHtml = '<td class="cell" ' + cellStyleAttr + ' ' + mergeAttr + '" title="' + comment + '">' + cellValue + '</td>'; htmlTable += cellHtml; } htmlTable += '</tr>'; } htmlTable += '</table>'; document.getElementById('excelPreview').innerHTML = htmlTable; }) .catch(error => { console.error('Error fetching Excel data:', error); }); } function getCellStyle(cellStyle) { var styleAttr = ''; if (cellStyle.font) { var font = cellStyle.font; if (font.bold) styleAttr += 'font-weight:bold;'; if (font.italic) styleAttr += 'font-style:italic;'; if (font.underline) styleAttr += 'text-decoration:underline;'; if (font.strike) styleAttr += 'text-decoration:line-through;'; if (font.color) styleAttr += 'color:' + font.color.rgb + ';'; if (font.name) styleAttr += 'font-family:' + font.name + ';'; } if (cellStyle.alignment) { var alignment = cellStyle.alignment; if (alignment.horizontal) styleAttr += 'text-align:' + alignment.horizontal + ';'; if (alignment.vertical) styleAttr += 'vertical-align:' + alignment.vertical + ';'; } if (cellStyle.fill) { var fill = cellStyle.fill; if (fill.patternType === 'solid' && fill.fgColor) { styleAttr += 'background-color:' + fill.fgColor.rgb + ';'; } } return styleAttr; } function getMergeAttributes(sheet, row, col) { var mergeCells = sheet['!merges'] || []; for (var i = 0; i < mergeCells.length; i++) { var mergeRange = XLSX.utils.decode_range(mergeCells[i]); if (row >= mergeRange.s.r && row <= mergeRange.e.r && col >= mergeRange.s.c && col <= mergeRange.e.c) { return 'rowspan="' + (mergeRange.e.r - mergeRange.s.r + 1) + '" colspan="' + (mergeRange.e.c - mergeRange.s.c + 1) + '"'; } } return ''; } function getCellComment(cell) { if (cell && cell.c) { var comment = cell.c[0].t; return comment; } return ''; } </script> </body> </html>
圖片展示
發現一個代碼高亮轉成圖片的網站:
https://10015.io/tools/code-to-image-converter?utm_source=appinn.com