嵌入Power BI报表可视化后，能否用JS提取指定标题与数值？

一、无需修改Power BI报表：用Power BI Embedded JS API提取 #

嵌入的Power BI可视化本质是可交互的HTML组件，不是静态图片，完全可以通过官方JavaScript API直接获取数据，不用做OCR解析：

• 获取嵌入的报表实例：const report = powerbi.get(reportContainer);
• 获取报表中的所有可视化对象：const visuals = await report.getVisuals();
• 定位到目标可视化（比如通过名称筛选），调用getVisualDataAsync()方法获取其元数据和数值：

  const targetVisual = visuals.find(v => v.name === "目标可视化名称");
  const visualData = await targetVisual.getVisualDataAsync();
  // 从返回的结构化数据里提取标题和数值，比如visualData.metadata.title、visualData.dataPoints[0].value
  

• 直接从返回的JSON数据中提取“Førstehjelp”和“50”，精准且稳定。

二、修改Power BI报表：更简单的直接方案 #

如果只是想让嵌入后的内容只保留标题和数值，直接在Power BI Desktop里调整可视化样式：

• 去掉边框、背景、多余图标等无关元素，只保留标题文本和数值卡片
• 发布后再嵌入到网页，此时可以直接通过DOM选择器提取内容，代码更简洁：

  // 示例：通过元素特征定位标题和数值
  const title = document.querySelector(".visual-title-text").textContent;
  const value = document.querySelector(".card-value").textContent;
  

注意：不要尝试用OCR解析截图，嵌入的Power BI可视化是动态HTML组件，直接操作组件数据或DOM才是正确路径。

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