我刚好做过类似的实现，给你整理了一个可直接运行的SPFx + KnockoutJS示例，用Excel REST API读取SharePoint Online文档库的Excel数据：

1. 配置SPFx项目权限 #

首先得确保你的SPFx项目已经配置了对站点的读写权限，在package-solution.json里添加权限请求：

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "Files.Read.All"
  },
  {
    "resource": "SharePoint",
    "scope": "Site.Read.All"
  }
]

部署后记得在租户App Catalog里批准这些权限，不然API调用会失败。

2. 核心Knockout视图模型代码 #

创建一个视图模型，封装Excel REST API的调用和数据解析逻辑：

import * as ko from 'knockout';
import { HttpClient, HttpClientResponse } from '@microsoft/sp-http';

export interface ExcelRow {
  [key: string]: string | number;
}

export class ExcelReaderViewModel {
  public excelData: ko.ObservableArray<ExcelRow> = ko.observableArray([]);
  public isLoading: ko.Observable<boolean> = ko.observable(false);
  private httpClient: HttpClient;
  private siteUrl: string;

  constructor(httpClient: HttpClient, siteUrl: string) {
    this.httpClient = httpClient;
    this.siteUrl = siteUrl;
    // 组件加载时自动获取数据
    this.loadExcelData();
  }

  public async loadExcelData(): Promise<void> {
    this.isLoading(true);
    try {
      // 替换成你的文档库相对路径和Excel文件名，空格要转成%20
      const excelFileRelativeUrl = '/sites/YourSite/Shared%20Documents/SampleData.xlsx';
      // 调用Excel REST API获取指定范围的数据，这里取Sheet1的A1到Z100
      const apiUrl = `${this.siteUrl}/_vti_bin/ExcelRest.aspx${excelFileRelativeUrl}/Model/Ranges('Sheet1!A1:Z100')?$format=json`;

      const response: HttpClientResponse = await this.httpClient.get(
        apiUrl,
        HttpClient.configurations.v1,
        {
          headers: {
            'Accept': 'application/json;odata=verbose',
            'Content-Type': 'application/json;odata=verbose'
          }
        }
      );

      if (!response.ok) {
        throw new Error(`请求失败，状态码: ${response.status}`);
      }

      const data = await response.json();
      // 把API返回的格式转换成方便Knockout绑定的数组
      const rows: ExcelRow[] = [];
      const columns = data.d.ColumnNames;
      const values = data.d.RowValues;

      values.forEach((rowValues: any[]) => {
        const row: ExcelRow = {};
        columns.forEach((colName: string, index: number) => {
          row[colName] = rowValues[index];
        });
        rows.push(row);
      });

      this.excelData(rows);
    } catch (error) {
      console.error('加载Excel数据出错:', error);
      // 这里可以加个用户可见的错误提示，比如弹出消息
    } finally {
      this.isLoading(false);
    }
  }
}

3. HTML视图与Knockout绑定 #

在WebPart的HTML模板里添加动态绑定的表格：

<div class="excel-reader-container" data-bind="with: viewModel">
  <div class="loading-text" data-bind="visible: isLoading">正在加载数据...</div>
  
  <!-- 数据表格 -->
  <table class="excel-table" data-bind="visible: !isLoading() && excelData().length > 0">
    <thead>
      <tr>
        <!-- 动态生成表头 -->
        <!-- ko if: excelData().length > 0 -->
        <!-- ko foreach: Object.keys(excelData()[0]) -->
        <th data-bind="text: $data"></th>
        <!-- /ko -->
        <!-- /ko -->
      </tr>
    </thead>
    <tbody>
      <!-- 动态生成数据行 -->
      <!-- ko foreach: excelData -->
      <tr>
        <!-- ko foreach: Object.values($data) -->
        <td data-bind="text: $data"></td>
        <!-- /ko -->
      </tr>
      <!-- /ko -->
    </tbody>
  </table>

  <!-- 空数据提示 -->
  <div class="empty-text" data-bind="visible: !isLoading() && excelData().length === 0">未找到数据</div>
</div>

4. WebPart主类初始化视图模型 #

在WebPart的主类里初始化视图模型并完成Knockout绑定：

import * as ko from 'knockout';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { ExcelReaderViewModel } from './ExcelReaderViewModel';
import './styles/ExcelReaderWebPart.module.scss';
import * as strings from 'ExcelReaderWebPartStrings';

export interface IExcelReaderWebPartProps {}

export default class ExcelReaderWebPart extends BaseClientSideWebPart<IExcelReaderWebPartProps> {
  private viewModel: ExcelReaderViewModel;

  public render(): void {
    this.domElement.innerHTML = `
      <div class="excel-reader-container" id="excelReaderRoot"></div>
    `;

    // 传入SPFx的HttpClient和当前站点URL初始化视图模型
    this.viewModel = new ExcelReaderViewModel(this.context.httpClient, this.context.pageContext.web.absoluteUrl);
    // 绑定到DOM元素
    ko.applyBindings({ viewModel: this.viewModel }, this.domElement.querySelector('#excelReaderRoot'));
  }

  protected onDispose(): void {
    // 清理Knockout绑定，避免内存泄漏
    ko.cleanNode(this.domElement);
  }
}

几个关键注意点 #

• 一定要替换代码中的Excel文件路径为你实际的路径，路径里的空格必须转成%20
• Excel REST API的端点可以灵活调整：比如要获取整个工作表用/Model/Sheets('Sheet1')?$format=json，要获取特定命名范围用/Model/NamedRanges('MyRange')?$format=json
• 权限配置是关键，部署后必须在租户App Catalog里批准对应的权限，否则会出现403错误
• 可以根据自己的需求扩展错误处理逻辑，比如添加Toast通知提示用户加载失败

内容的提问来源于stack exchange，提问作者Rommel Sudan