如何将 Power BI 报表轻松导出到 HTML？

javascript

2024-03-16 01:28:06

Power BI 报表轻松导出到 HTML

前言

想在其他网站上展示交互式 Power BI 报表？导出为 HTML 即可轻松实现。本文将详细介绍使用 Power BI API 和 JavaScript 的分步指南，让你快速将报表嵌入你的网站中。

步骤 1：获取 Power BI API 访问令牌

Power BI API 需要访问令牌才能与 Power BI 服务交互。获取令牌需要经过 Azure Active Directory 的授权。访问 Power BI API 文档了解获取访问令牌的详细步骤。

步骤 2：使用 JS 导出报表为 HTML

拥有访问令牌后，就可以使用 JS 发起请求，将报表导出为 HTML：

构建导出请求： 创建包含以下信息的请求：
- HTTP 方法：POST
- 请求头：包括授权标头、内容类型和导出格式
- 请求正文：指定要导出的报表 ID
发送请求： 使用 fetch() 函数或其他 JS 库发送请求。
处理响应： 如果导出成功，响应将包含导出的 HTML 代码。

步骤 3：显示导出的 HTML

获得导出的 HTML 后，可以将其显示在你的网站上：

创建 HTML 容器： 在 HTML 页面中创建 <div> 或其他容器元素。
插入导出的 HTML： 将导出的 HTML 代码插入到容器中。
样式化容器： 使用 CSS 样式化容器，以适应你的网站设计。

代码示例

以下 JS 代码展示了如何将 Power BI 报表导出为 HTML 并显示在网站上：

async function exportReportToHTML() {
  // 获取访问令牌
  const accessToken = await getAccessToken();

  // 构建导出请求
  const request = {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${accessToken}`,
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify({
      reportId: 'YOUR_REPORT_ID'
    })
  };

  // 发送请求
  const response = await fetch('https://api.powerbi.com/v1.0/myorg/reports/exportToHtml', request);

  // 处理响应
  if (response.ok) {
    const html = await response.text();

    // 显示导出的 HTML
    document.getElementById('report-container').innerHTML = html;
  } else {
    console.error('Error exporting report to HTML: ', response.statusText);
  }
}

exportReportToHTML();

结论

遵循这些步骤，你就可以轻松地将 Power BI 报表导出为 HTML，并显示在你的网站上。通过了解 Power BI API 和 JS 导出报表的流程，你可以轻松地嵌入交互式报表，提升网站的数据可视化效果。

常见问题解答

如何解决导出报表时遇到的错误？
检查请求是否正确，包括授权、内容类型和报表 ID。如果问题仍然存在，请查看 Power BI API 文档以获取更多故障排除提示。
可以导出哪些其他格式的报表？
除了 HTML，你还可以导出为 PDF、PNG、CSV 和 Excel。请参阅 Power BI API 文档了解可用格式的完整列表。
如何在导出后保持报表的交互性？
默认情况下，导出的 HTML 报表不具备交互性。若要启用交互性，需要使用 Power BI 嵌入代码库。
导出报表需要付费吗？
不，导出报表是 Power BI 服务的一部分，不需要额外费用。
在哪里可以获得更多有关 Power BI API 的信息？
访问 Power BI API 文档以获取有关使用 Power BI API 的更多详细信息和示例。