Angular7 enables the integration of both the download and print features within an embedded Power BI report

I've successfully integrated a PowerBI report into my Angular7 client application by registering the app with Azure Active Directory (AAD). The embedding process went smoothly, but now I want to enable users of my client app to download and print the embedded report. Below is the Angular7 code snippet that I used to embed the PowerBI report.

showReport() {
    // Secure access token for the report
    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"
        }
      }
    };
    // Get the reference to the HTML div element where the report will be displayed.
    let reportContainer = <HTMLElement>document.getElementById('reportContainer');
    // Embed the report within the specified 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);
    // Remove the "loaded" event handler if it exists.
    report.off("loaded");
    // Add an event handler to log when the report is loaded.
    report.on("loaded", function () {
      console.log("Loaded");
    });
  }

Any suggestions on how can I enable users to download and print the embedded report?

angulartypescriptazurepowerbipowerbi-embedded

Answer №1

To print the report, simply use report.print():

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

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

For more information on printing a report, refer to the official PowerBI JavaScript documentation. While this method opens the Print dialog, the resulting output may not be ideal. Unfortunately, there is no direct way to export the report as a file like PDF or PowerPoint using the API. The SaveAs function allows you to create a copy of the report within the service, but not as a downloadable file.

// Locate the embedded report HTML element
var embedContainer = $('#embedContainer')[0];

// Access the embedded report
report = powerbi.get(embedContainer);

var saveAsParameters = {
    name: "newReport"
};

// SaveAs the report
report.saveAs(saveAsParameters);

Answer №2

I have successfully integrated the following code snippet into my Angular 6 project

// Incorporate powerbi-client library 

import * as pbi from 'powerbi-client';

// Declare necessary variables

let reportPrint;

// Implementing the print functionality

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);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Embedding in webpack compilation

My current setup involves using webpack 2.4.2 for a Typescript-based AngularJS 1.6 application. Whenever I make modifications to files like .ts, .js, and .less, webpack automatically scans for lint errors and notifies me about them. Although I'm unsu ...

typescriptwebpack

Can you explain why Argument of type 'Element' cannot be assigned to a parameter of type 'never'?

The Chessboard Challenge export default function GenerateChessboard(){ let chessboard = []; for(let i = 0 ; i < rowsArray.length; i++) { for(let j = columnsArray.length-1 ; j >= 0 ; j--) { const number = i + j ...

reactjstypescript

Extensions in Vscode are failing to function properly when multiple instances are open

I have been experimenting with creating a VsCode Extension using typescript and I encountered an issue while trying to track all the activities using events. Specifically, I set up listeners for when a file is opened so that an event is triggered and the ...

typescriptvisual-studio-codevscode-extensions

Encountering an issue when attempting to convert data to JSON in Angular 13, as the content type 'text/plain;charset=UTF-8' is not supported. This problem arises after sending data from

I've been attempting to submit a form using the following method: saveBuildcompany(): void { // @ts-ignore // @ts-ignore console.log(this.group?.value); let data2=this.group.value; let serializedForm = JSON.stringify(data2) ...

jsonangularspring-bootangular13

Incorporate a component into another component using a service

I have developed a unique modal service that can open a view. What I am trying to achieve is the ability to call an .open function and provide a component as a parameter. This component should then be added to the container view that is being opened. Here ...

angular

Tips for showing informational text when the dialogue box is open

When I open my help dialog, the information texts are not displayed right away. They only appear when I click on the subsection. Is there a way to show them as soon as the dialog box is opened? Any suggestions or assistance would be greatly appreciated. H ...

javascripthtmlangulartypescriptfrontend

Scouring the Active Directory with AngularJS

I am still fairly new to working with Angular, and I have a web application that requires users to input names and locations. One common issue raised by users is the inability to search for people using active directory. Is there a way for me to implemen ...

angularactive-directory

Why does the order of the conditional check impact how function arguments are restricted when undefined?

I created a TypeScript function that enforces a rule where a function must accept either zero or two arguments, but not just one. In other words, if the first argument is passed in, the second parameter becomes required. Here is how the function looks lik ...

typescript

Tips for making the editor automatically focus on the expansion panel content when the expansion panel is opened in Angular

I need assistance with focusing the Quill editor when expanding an expansion panel in my project. The expansion panel has a header that reads "Write a Response", and upon opening it, the Quill editor should be focused. <mat-expansion-panel #panel1> & ...

angularquillautofocusmat-expansion-panel

encountering an issue during the installation of a node package

Encountering this error while trying to install npm i npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bfaf5fceef7fae9b6f2f6fafcfeb6fefff2eff4e9dbabb5abb5aa">[email protected]</a> npm ERR! ...

angularnpmnpm-install

"Ensuring function outcomes with Typescript"Note: The concept of

I've created a class that includes two methods for generating and decoding jsonwebtokens. Here is a snippet of what the class looks like. interface IVerified { id: string email?: string data?: any } export default class TokenProvider implements ...

javascriptnode.jstypescriptexpress

What is the best way to integrate properties subsets into your classes?

In my code, I am working with 3 classes ... class1 { constructor(a, b, c) { this.a = a; this.b = b; this.c = c; this.toClass2 = function() { // TODO: return this as an instance of class2; // the conversion would remove the un ...

javascriptdesign-patternstypescriptecmascript-6

Is there a method for creating TypeScript definitions that generates members dynamically?

While I'm not completely satisfied with the title of this question, I struggled to come up with something better at the moment. I have a feeling that what I am looking for may not be supported, but I am willing to be proven wrong! Currently, I am wo ...

typescript

What is the best method for transferring data from the first table to the second table in Angular?

I am looking to transfer data (Item and Price) from the first table to the second table and increase the Quantity field in the Second table upon clicking on an Item in the First Table. I am currently developing in Angular 9. First Table: Code | Item | Pr ...

javascriptjqueryangularasp.net-core-webapi

Steps to ensure checkboxes are enabled for selection only when another box has been checked

Consider having 3 checkboxes: 1 'parent' checkbox and 2 'child' checkboxes. If the parent checkbox is selected, you should be able to select either or both of the child checkboxes. If the parent checkbox is deselected, neither of the ...

htmlangularcheckbox

What is the best way to incorporate Angular component HTML into an existing application?

I am looking to implement Angular components. import { Component } from '@angular/core' import { DialogService } from './dialog/dialog.service' @Component({ selector: 'app-root', templateUrl: '<div></div> ...

angularangular7

Exploring Angular's nested categories with the power of *ngFor loop

I am facing a challenge with an undefined number of arrays that can be nested without limit. This is for the "filtering" section on a page where products are listed. However, I am struggling to dynamically create this structure on the HTML side. [ { ...

javascriptangulartypescriptnestedangular8

Problems with lazy loading routes in Angular 2+: routes not loading without any error messages

I've been attempting to incorporate lazy loading in my Angular routes. Despite having a functional version in another application, my current implementation does not seem to be working. There are no visible errors, just an empty <router-outlet>. ...

angular

Could it be that the TypeScript definitions for MongoDB are not functioning properly?

Hello everyone, I'm facing an issue with getting MongoDB to work in my Angular 4 project. In my code, I have the db object as a client of the MongoClient class: MongoClient.connect('mongodb://localhost:27017/test', (err, client) => { ...

angularmongodbtypescript

How do I establish a connection between orientDB and an AngularJS web application?

I am looking for a way to integrate orientDB with my angularJS login web application. Once the user logs in, they should be able to input data into the web application, which will then be stored in the orient DB database. I am seeking guidance on connect ...

angularjsdatabaseangularorientdbnosql