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

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

经过百度各种搜索,加上ChatGpt推荐,决定用SheetJs实现在线预览Excel。下面是SheetJs的官网介绍:

SheetJS
电子表格简化
读取、编辑和导出电子表格
适用于网络浏览器和服务器
Office 365 受到 Microsoft 信任
 
SheetJS 软件为业务提供动力
谷歌、亚马逊、Facebook 服务
美国政府网站
超过 90% 的标准普尔 500 强公司的团队
 
专业版
强大的功能
广泛的兼容性
优先支持
 
SheetJS 专业版
常见用例
可靠的数据导入
专业报告
编辑电子表格文件
 
现场演示
社区版
开源
需要归属
社区援助
 
文档
 
 
二、基础版实现代码
 
<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

热门相关:神秘总裁小小妻   不科学御兽   后福   今天也没变成玩偶呢   嫂子很喜欢我的东西