一、寻找合适的在线预览Excel的js库

我：在线预览Excel文件有哪些好用的js库ChatGPT：有几个好用的JavaScript库可以用来在网页上实现在线预览Excel文件。以下是一些常见且功能强大的库：

  1. SheetJS (xlsx.js): 这是一个功能强大的库，可以在网页上实现Excel文件的读取、写入和预览。它支持多种Excel格式，包括XLSX、XLS、CSV等。你可以使用SheetJS来读取Excel文件内容，并将其呈现在网页上的HTML表格中。

  2. Handsontable: Handsontable是一个用于创建丰富交互式表格的库，支持Excel样式的编辑和查看功能。它可以将Excel文件内容以表格的形式呈现在网页上，用户可以编辑和查看数据。该库还提供了很多定制和扩展的选项。

  3. DHTMLX Spreadsheet: 这是一个基于JavaScript的电子表格库，支持Excel样式的功能，包括公式、格式化、排序、筛选等。它可以在网页上呈现Excel文件，并提供与电子表格相关的功能。

  4. ExcelJS: ExcelJS是一个用于读取、创建和修改Excel文件的库，可以在网页上进行操作。它支持XLSX格式，允许你生成Excel文件，并支持多种单元格格式。

  5. FlexGrid: Wijmo FlexGrid是一个功能强大的网格控件，支持Excel样式的功能，如排序、筛选、分组等。它可以用于在网页上呈现Excel文件，并提供类似于Excel的交互体验。

这些库中的每一个都有其独特的特点和优势，根据你的需求和项目的要求，你可以选择适合的库来实现在线预览Excel文件功能。

二、基础版实现代码

(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);})();

三、增强版实现代码，支持单元格格式等

由于基础实现丢失了很多关键格式信息，比如字体大小、背景色、对齐方式、批注等。于是请教ChatGpt帮忙写代码。下面是ChatGpt写出来的代码，正确与否待验证

  Excel Online Preview        /* 根据需要设置单元格样式 */    .cell {      padding: 5px;      border: 1px solid #ccc;      font-family: Arial, sans-serif;    }      
      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 = '';          for (var row = 0; row < cellData.length; row++) {            htmlTable += '';            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 = '';              htmlTable += cellHtml;            }            htmlTable += '';          }          htmlTable += '
' + cellValue + '
';          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.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 '';    }

图片展示

发现一个代码高亮转成图片的网站：

https://10015.io/tools/code-to-image-converter?utm_source=appinn.com