Problem - Printing of embedded powerBi report in an Angular
application
As powerbi provides no export to pdf functionality in its
embedded report printing is a very hard thing to achieve. Power bi report when
used in angular is embedded into an iframe. This makes it hard for us to use
html2canvas as the contents of the iframe are inaccessible. Programmatically taking
a screenshot of the report could be the only other option for developers
however the resolution of such a report could pose a major problem.
Additionally, if the report has content that exceeds the viewport height then
additional screenshots would have to be taken and collated.
The solution:
Triggering a window.print programmatically on click of
download report button would be the best way to get a report, followed by a ‘Save
as Pdf’ click by user until the Microsoft powerBI community comes up with the
export to pdf functionality
The catch:
Window.print would print the entire screen of the
application which would include the header and certain elements which the user
may/may not want in his report.
The hack:
In scss of the angular project we could add :
@media
print
{
.noprint
{display:none;}
}
And use noprint class against the elements which we don’t want
to see in the report in the related html files of the Angular project.
This would hide the areas which we wouldn’t like to display
in our report.
However, the place where these elements are present would be
shown empty.
