如何借助SP/PnP在SPFx Web部件中获取SharePoint Online站点使用报告？

一、使用@pnp/graph获取租户级/站点级使用报表 #

1. 配置权限 #

在SPFx项目的config/package-solution.json中添加Graph权限请求：

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "Reports.Read.All"
  }
]

部署解决方案后，需租户管理员在SharePoint管理中心或Azure AD管理门户中批准该权限。

2. 调用Graph API获取数据 #

通过@pnp/graph调用对应的报表接口，示例代码：

import { graph } from "@pnp/graph";

// 获取最近7天的站点使用详情
async function getSiteUsageReport() {
  try {
    const reportData = await graph.api("/reports/getSharePointSiteUsageDetail(period='D7')").get();
    // 解析CSV格式的返回数据为JSON
    const parsedData = parseCsvToJson(reportData);
    return parsedData;
  } catch (error) {
    console.error("获取站点使用报告失败:", error);
  }
}

// CSV转JSON辅助函数
function parseCsvToJson(csv: string) {
  const lines = csv.split("\n");
  const headers = lines[0].split(",");
  return lines.slice(1).map(line => {
    const values = line.split(",");
    return headers.reduce((obj, header, index) => {
      obj[header.trim()] = values[index]?.trim();
      return obj;
    }, {} as any);
  });
}

常用Graph报表接口：

• getSharePointSiteUsageDetail(period='D7')：站点使用详情（活跃用户、页面访问量等）
• getSharePointSiteUsagePages(period='D30')：站点页面访问统计
• getSharePointSiteUsageStorage(period='D90')：站点存储使用统计

二、使用@pnp/sp获取单个站点的使用数据 #

如果仅需展示当前站点的使用情况，可直接用@pnp/sp调用SharePoint REST API：

1. 获取站点存储使用信息 #

import { sp } from "@pnp/sp";

async function getSiteStorageInfo() {
  try {
    const storageInfo = await sp.web.storageQuotaInformation();
    return {
      usedStorage: storageInfo.Usage,
      totalStorage: storageInfo.Quota,
      remainingStorage: storageInfo.Quota - storageInfo.Usage
    };
  } catch (error) {
    console.error("获取站点存储信息失败:", error);
  }
}

2. 获取站点页面/文档访问统计 #

通过站点分析API获取页面访问数据：

async function getSitePageAnalytics() {
  try {
    const analyticsItems = await sp.web.siteAnalytics.getAnalyticsItems({
      startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), // 最近30天
      endDate: new Date(),
      url: sp.web.url,
      hitType: 1 // 1=页面访问，2=文件访问
    });
    return analyticsItems;
  } catch (error) {
    console.error("获取站点分析数据失败:", error);
  }
}

三、在Web部件中渲染数据 #

将获取到的数据在Web部件的render()方法中渲染为HTML，示例：

public async render(): Promise<void> {
  const siteUsage = await getSiteUsageReport();
  const storageInfo = await getSiteStorageInfo();

  this.domElement.innerHTML = `
    <div class="site-usage-report">
      <h3>站点存储使用</h3>
      <p>已使用: ${(storageInfo.usedStorage / 1024 / 1024).toFixed(2)} MB</p>
      <p>总容量: ${(storageInfo.totalStorage / 1024 / 1024).toFixed(2)} MB</p>
      <h3>最近7天站点活跃数据</h3>
      <ul>
        ${siteUsage.map(item => `<li>${item.SiteName}: 活跃用户 ${item.ActiveUsers}</li>`).join("")}
      </ul>
    </div>
  `;
}

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