使用SheetJs实现在线预览Excel（保留单元格格式信息）

一、寻找合适的在线预览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>

图片展示

经过验证，ChatGpt生成的代码总体逻辑是对的，但是很多细节是错的，比如类型对不上，属性缺失等等问题，导致单元格格式并没有完整正确地展示到页面上。比如：对齐信息、颜色信息缺失。合并单元格和批注信息倒是有的。不知道是SheetJs的问题，还是我们不会用SheetJs。如果要展示原始格式，还是用其它插件吧。

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

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

posted @ 2023-08-31 22:25 追极阅读(3393) 评论(0) 编辑收藏举报

追极

使用SheetJs实现在线预览Excel（保留单元格格式信息）

公告