Download, Print option in PowerBI embedded report with Angular7

Question

I have created PowerBI report and It has been embedded to my angular7 client application by registering the application with Azure Active Directory(AAD). It embeds perfectly. I want to allow that embedded report to be downloaded, printed by the user of my client application. Following is my Angulr7 code to embed the PowerBI report.

      showReport() {
    // Report's Secured Token
    let accessToken = 'myAccessToken';
    // Embed URL
    let embedUrl = 'embedUrl';
    // Report ID
    let embedReportId = 'embedReportId';
    let config = {
      type: 'report',
      accessToken: accessToken,
      embedUrl: embedUrl,
      id: embedReportId,
      settings: {
        localeSettings: {
          language: "en",
          formatLocale: "es"
        }
      }
    };
    // Grab the reference to the div HTML element that will host the report.
    let reportContainer = <HTMLElement>document.getElementById('reportContainer');
    // Embed the report and display it within the div container.
    let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
    let report = powerbi.embed(reportContainer, config);
    var rep = powerbi.get(reportContainer);
    // Report.off removes a given event handler if it exists.
    report.off("loaded");
    // Report.on will add an event handler which prints to Log window.
    report.on("loaded", function () {
      console.log("Loaded");
    });
  }

How can I achieve this?

Answer 1

You can print the report by calling report.print():

var element = document.getElementById('#myReport');
var report = powerbi.get(element);

report.print()
  .catch(error => { ... });

See Print a report in the official docs too. This will show the Print dialog, but the result isn't nice. Usually through printing you can create PDF file too, because there is no way to export a report as file (PDF, PowerPoint) using the API. SaveAs will allow you to make a copy of the report in the service, not as a file on the local disk.

// Get a reference to the embedded report HTML element
var embedContainer = $('#embedContainer')[0];

// Get a reference to the embedded report.
report = powerbi.get(embedContainer);

var saveAsParameters = {
    name: "newReport"
};

// SaveAs report
report.saveAs(saveAsParameters);

Answer 2

I have implemented this below code in angular 6

// Import powerbi-client

import * as pbi from 'powerbi-client';

// Variable declaration

let reportPrint;

//Inside the print function

let reportContainer = <HTMLElement>document.getElementById('reportContainer');
let powerbi = new 
pbi.service.Service(pbi.factories.hpmFactory,pbi.factories.wpmpFactory, 
pbi.factories.routerFactory);
this.reportPrint = powerbi.get(reportContainer);

this.reportPrint.print().catch(error => {  
    console.log(error);
});