一、尋找合適的在線預(yù)覽Excel的js庫
?
?
-
SheetJS (xlsx.js): 這是一個功能強(qiáng)大的庫，可以在網(wǎng)頁上實現(xiàn)Excel文件的讀取、寫入和預(yù)覽。它支持多種Excel格式，包括XLSX、XLS、CSV等。你可以使用SheetJS來讀取Excel文件內(nèi)容，并將其呈現(xiàn)在網(wǎng)頁上的HTML表格中。
-
Handsontable: Handsontable是一個用于創(chuàng)建豐富交互式表格的庫，支持Excel樣式的編輯和查看功能。它可以將Excel文件內(nèi)容以表格的形式呈現(xiàn)在網(wǎng)頁上，用戶可以編輯和查看數(shù)據(jù)。該庫還提供了很多定制和擴(kuò)展的選項。
-
DHTMLX Spreadsheet: 這是一個基于JavaScript的電子表格庫，支持Excel樣式的功能，包括公式、格式化、排序、篩選等。它可以在網(wǎng)頁上呈現(xiàn)Excel文件，并提供與電子表格相關(guān)的功能。
-
ExcelJS: ExcelJS是一個用于讀取、創(chuàng)建和修改Excel文件的庫，可以在網(wǎng)頁上進(jìn)行操作。它支持XLSX格式，允許你生成Excel文件，并支持多種單元格格式。
-
FlexGrid: Wijmo FlexGrid是一個功能強(qiáng)大的網(wǎng)格控件，支持Excel樣式的功能，如排序、篩選、分組等。它可以用于在網(wǎng)頁上呈現(xiàn)Excel文件，并提供類似于Excel的交互體驗。
這些庫中的每一個都有其獨特的特點和優(yōu)勢，根據(jù)你的需求和項目的要求，你可以選擇適合的庫來實現(xiàn)在線預(yù)覽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>
??
三、增強(qiáng)版實現(xiàn)代碼，支持單元格格式等
由于基礎(chǔ)實現(xiàn)丟失了很多關(guān)鍵格式信息，比如字體大小、背景色、對齊方式、批注等。于是請教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>
/* 根據(jù)需要設(shè)置單元格樣式 */
.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>
圖片展示
經(jīng)過驗證，ChatGpt生成的代碼總體邏輯是對的，但是很多細(xì)節(jié)是錯的，比如類型對不上，屬性缺失等等問題，導(dǎo)致單元格格式并沒有完整正確地展示到頁面上。比如：對齊信息、顏色信息缺失。合并單元格和批注信息倒是有的。不知道是SheetJs的問題，還是我們不會用SheetJs。如果要展示原始格式，還是用其它插件吧。
?
發(fā)現(xiàn)一個代碼高亮轉(zhuǎn)成圖片的網(wǎng)站：文章來源：http://www.zghlxwxcb.cn/news/detail-685694.html
https://10015.io/tools/code-to-image-converter?utm_source=appinn.com文章來源地址http://www.zghlxwxcb.cn/news/detail-685694.html
到了這里，關(guān)于使用SheetJs實現(xiàn)在線預(yù)覽Excel（保留單元格格式信息）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
