已将PowerBI报表嵌入HTML div容器，如何通过JavaScript API获取视觉数据？

Absolutely! You can absolutely pull report data or visual-specific data using the PowerBI JavaScript SDK—this is a widely supported scenario for embedded Power BI implementations. Let me break down how to make this work, along with important things to keep in mind:

Prerequisites First #

Before diving into code, make sure you have these covered:

• Your embed configuration includes sufficient permissions. At minimum, you need models.Permissions.Read (or higher like ReadWrite) in your embed settings—without this, the SDK will block data retrieval requests.
• You’ve already successfully embedded the report and have access to the report instance returned by the powerbi.embed() method.

Step-by-Step Implementation #

Here’s how to fetch data once your report is embedded:

1. Get your embedded report instance
   If you haven’t stored it already, grab the report object from your embed container:

   const embedContainer = document.getElementById('your-div-container-id');
   const report = powerbi.get(embedContainer); // Or use the instance returned when you called embed()
   

2. Access the active report page
   Data is tied to visuals on specific pages, so first get the current active page:

   const currentPage = await report.getActivePage();
   

3. Retrieve visuals on the page
   You can get all visuals on the page, or target a specific one by its ID/name:

   // Get all visuals on the current page
   const visuals = await currentPage.getVisuals();
   
   // Optional: Target a specific visual by name
   const targetVisual = visuals.find(visual => visual.name === "YourVisualName");
   

4. Fetch the visual’s data
   Use the getVisualData() method on your target visual to get its underlying data (this respects any active filters/slicers applied to the report):

   try {
     const visualData = await targetVisual.getVisualData();
     // Process or log the data as needed
     console.log("Visual Data:", visualData);
   } catch (error) {
     console.error("Failed to retrieve visual data:", error);
   }
   

Key Notes to Avoid Headaches #

• Filtered Data Only: The getVisualData() method returns exactly the data the visual is displaying right now—so if users have applied slicers or filters, the data will reflect those changes.
• Async/Await is Mandatory: All PowerBI SDK methods are asynchronous, so make sure to wrap your code in an async function or use Promise chains.
• Token Permissions: Double-check that your embed token includes the Read permission. If you’re generating tokens server-side, ensure you’re setting the correct scope when creating the token.
• Error Handling: Always wrap data retrieval calls in try/catch blocks—common errors include missing permissions, invalid visual IDs, or network issues.

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