reactjs - 进行更改后将 Power BI 嵌入式报表保存在数据库中

Question

我正在使用 power bi 嵌入式包来嵌入 power bi 报告 - https://github.com/microsoft/powerbi-client-react

报表嵌入在编辑模式中，因此用户可以创建或编辑报表。现在我有一个保存按钮，一旦用户对 power bi 报告进行了更改，我想将报告保存在数据库中。你能告诉我如何触发报告事件吗？看起来允许的保存事件不起作用。

此外，如果我必须在用户进行更改或创建报表后获取报表实例，我如何才能再次获取报表实例以反射(reflect)新的更改？

<PowerBIEmbed
    embedConfig = {{
        type: 'report',   // Supported types: report, dashboard, tile, visual and qna
        id: '<Report Id>',
        embedUrl: '<Embed Url>',
        accessToken: '<Access Token>',
        tokenType: models.TokenType.Embed,
        viewMode: models.ViewMode.Edit,
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
            background: models.BackgroundType.Transparent,
        }
    }}

    eventHandlers = { 
        new Map([
            ['loaded', function () {console.log('Report loaded');}],
            ['rendered', function () {console.log('Report rendered');}],
            ['error', function (event) {console.log(event.detail);}]
        ])
    }
        
    cssClassName = { "report-style-class" }

    getEmbeddedComponent = { (embeddedReport) => {
        this.report = embeddedReport as Report;
    }}
/>

报告已正确嵌入，但现在有人进行了更改后，我如何再次获取更新的报告实例，以便获得视觉效果并将其存储在数据库中？

Answer 1

目前，power-client-react不支持创建新报告。但是，您可以使用此库编辑现有报告并将其另存为新报告。为此，您需要执行以下步骤:

1. Generate embed token :

   • 如果要将报告更改另存为新报告，请在生成嵌入 token 请求中传递以下 JSON 正文:

     {
       "accessLevel": "Edit",
       "allowSaveAs": "true",
     }
     

   • 如果要将报告更改保存在同一报告中，请在生成嵌入 token 请求中传递以下 JSON 正文:

     {
       "accessLevel": "Edit",
     }
     

2. 嵌入报告 - 在您的 embedConfig 对象中添加这些配置:

   viewMode: models.ViewMode.Edit,
   permissions: models.Permissions.All,
   

3. 处理“已保存”事件:

   • 如果要将报告更改另存为新报告，请在您的事件处理程序映射中添加以下事件处理程序以获取新报告 ID，然后嵌入新报告以获取其实例:

     ['saved', function (event) {
         var newReportId = event.detail.reportObjectId);
     }]
     

   • 如果要将报表更改保存在同一个报表中，请在您的事件处理程序映射中添加以下事件处理程序，以确保更改已保存:

     ['saved', function (event) {
         console.log("Report saved");
     }]
     

4. 保存报告:

   • 以编程方式:如果您想保存按钮单击事件的更改并在单击监听器中调用以下函数，请在您的应用程序中添加一个保存按钮:

     1. 如果报表更改要保存为新报表

        function saveReport() {
          var saveAsParameters = {
              name: "<name_of_new_report>"
            };
          this.report.saveAs(saveAsParameters);
        }
        

     2. 如果报表更改要保存在同一个报表中

        this.report.save();
        

   • Power BI 嵌入式体验:

     1. 如果要将报告更改另存为新报告:
        • 点击左上角的"file"下拉菜单 > 点击“另存为”> 输入新报告的名称 > 点击“保存”
     2. 如果要将报表更改保存在同一个报表中:
        • 点击左上角的"file"下拉菜单 > 点击“保存”

注意:“保存”事件在保存操作完成时触发，并返回 Json object。包含新的 reportId、报告名称、旧的 reportId(如果有的话)以及操作是另存为还是保存。然后你可以使用这个 newReportId 生成嵌入 url 和嵌入 token 来嵌入报告并获取报告的实例。

可以引用GitHub wiki创建新报告。

在 Microsoft Docs 中查找完整文章.