Angular项目中预览上传Excel文件的技术难题

针对你的Angular Excel预览需求，以下几个方案可以实现接近原生的在线预览效果：

方案1：利用微软在线Office预览服务嵌入渲染 #

浏览器本身没有内置Excel文件渲染器，微软的Office Online Viewer可以提供原生风格的预览体验，只需将生成的Blob URL嵌入到官方预览链接中即可。

代码实现 #

previewExcelFile(byteArray: Uint8Array) {
  const blob = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  const fileUrl = window.URL.createObjectURL(blob);
  // 构造在线预览链接
  const officePreviewUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`;
  this.excelPreviewUrl = this.sanitizer.bypassSecurityTrustResourceUrl(officePreviewUrl);
  
  // 页面销毁时记得释放资源
  // ngOnDestroy() { window.URL.revokeObjectURL(fileUrl); }
}

模板代码 #

<iframe *ngIf="excelPreviewUrl" [src]="excelPreviewUrl" width="100%" height="600px" frameborder="0"></iframe>

注意：该方案依赖网络访问微软在线服务，Blob URL仅在当前页面生命周期内有效。

方案2：SheetJS+专业表格组件模拟Excel样式 #

如果不想依赖外部服务，可以用SheetJS读取Excel数据，结合Handsontable这类支持Excel风格渲染的组件，实现包含单元格格式、合并单元格、冻结行列等特性的预览效果。

步骤1：安装依赖 #

npm install xlsx handsontable @handsontable/angular

步骤2：组件代码 #

import { Component } from '@angular/core';
import * as XLSX from 'xlsx';
import { HotTableRegisterer } from '@handsontable/angular';

@Component({
  selector: 'app-excel-preview',
  templateUrl: './excel-preview.component.html',
  styleUrls: ['./excel-preview.component.css']
})
export class ExcelPreviewComponent {
  private hotRegisterer = new HotTableRegisterer();
  hotId = 'excel-preview-table';
  hotSettings: any;

  previewExcelFile(byteArray: Uint8Array) {
    const workbook = XLSX.read(byteArray, { type: 'array' });
    const sheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[sheetName];
    
    // 转换为二维数组并保留原始数据
    const data = XLSX.utils.sheet_to_json(worksheet, { header: 1, raw: false });
    // 读取列宽配置
    const colWidths = (worksheet['!cols'] || []).map(col => col.wch || 10);

    this.hotSettings = {
      data: data,
      colHeaders: true,
      rowHeaders: true,
      colWidths: colWidths,
      readOnly: true,
      // 处理合并单元格
      mergeCells: worksheet['!merges']?.map(merge => ({
        row: merge.s.r,
        col: merge.s.c,
        rowspan: merge.e.r - merge.s.r + 1,
        colspan: merge.e.c - merge.s.c + 1
      })),
      // 简单处理单元格样式（加粗、背景色）
      cell: (row: number, col: number) => {
        const cellAddr = XLSX.utils.encode_cell({r: row, c: col});
        const cell = worksheet[cellAddr];
        if (cell?.s) {
          return {
            className: cell.s.b ? 'bold' : '',
            style: {
              backgroundColor: cell.s.fill?.fgColor?.rgb ? `#${cell.s.fill.fgColor.rgb.slice(2)}` : ''
            }
          };
        }
        return {};
      }
    };
  }
}

步骤3：模板代码 #

<hot-table *ngIf="hotSettings" [hotId]="hotId" [settings]="hotSettings" width="100%" height="600px"></hot-table>

步骤4：可选样式 #

.bold {
  font-weight: bold;
}

方案3：后端转PDF复用现有预览逻辑 #

如果对外部服务有顾虑，可以在后端将Excel文件转换为PDF格式，前端直接复用已有的PDF预览逻辑。比如用Apache POI（Java）、OpenPyXL（Python）等工具处理Excel转PDF，再将PDF的byte[]返回给前端。

后端伪代码（Java） #

// 从数据库获取Excel字节数组
byte[] excelBytes = getExcelFromDB();
// 转换为PDF字节数组
try (InputStream input = new ByteArrayInputStream(excelBytes);
     ByteArrayOutputStream output = new ByteArrayOutputStream()) {
  XSSFWorkbook workbook = new XSSFWorkbook(input);
  // 使用Apache POI的PDF转换工具
  PdfConverter converter = new PdfConverter();
  converter.convert(workbook, output);
  byte[] pdfBytes = output.toByteArray();
  // 将pdfBytes返回给前端
}

前端直接调用已实现的previewPdfFile方法即可。

内容的提问来源于stack exchange，提问作者Sayana Anvesh