Capture Screenshot of Custom Visual with Button

[Sytriox]

Hi,

I am currently developing a custom visual for Power BI and I would like to add a feature that allows users to take a screenshot of the visual.

The idea is to include a button within the visual, and when clicked, it would capture a screenshot of the visual, potentially using an external library like html2canvas.

I am aware that Power BI provides a context menu solution to copying it , but this approach won’t work for me due to limitations.

Given that Power BI hosts custom visuals within an iframe, is it possible to implement this functionality on the client side? Can html2canvas or a similar library be used to capture the visual's content?

I would appreciate any insights or advice on how to achieve this.

Thanks in advance!

[Sytriox]

Hi @v-yiruan-msft 

I wanted to follow up and thank you for your earlier response to my question about using html2canvas in my Power BI custom visual!

The error I am encountering is:

Uncaught (in promise) SecurityError: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "null" from accessing a cross-origin frame.

From my understanding, this issue is happening because Power BI hosts custom visuals inside an iframe. This is likely what’s causing the problem, as html2canvas tries to access the visual's content and is blocked due to cross-origin policies.

Unfortunately, I'm not sure how to resolve this. Is there any  approach I can take to capture a screenshot of the visual? I’ve tried using the useCORS and allowTaint options in html2canvas, but that doesn’t seem to fix the issue.

If anyone has any insights or possible workarounds for dealing with this iframe sandboxing limitation, I would really appreciate your help!

Thanks again!

Best regards,

[v-yiruan-msft]

Hi @Sytriox ,

You can refer the following links to get it:

About | html2canvas

import * as d3 from "d3";
// Other imports as needed
import "html2canvas";

export class MyVisual implements IVisual {
    // Visual properties and constructor

    private captureButton: HTMLButtonElement;

    constructor(options: VisualConstructorOptions) {
        // Your constructor code

        this.captureButton = document.createElement("button");
        this.captureButton.innerText = "Capture Screenshot";
        this.captureButton.onclick = this.captureScreenshot.bind(this);
        options.element.appendChild(this.captureButton);
    }

    public update(options: VisualUpdateOptions) {
        // Your update code

        // Optionally append the button to the visual's DOM if it isn't already there
        if (!this.captureButton.parentElement) {
            options.element.appendChild(this.captureButton);
        }
    }

    private captureScreenshot() {
        html2canvas(document.querySelector('YOUR_VISUAL_ROOT_ELEMENT_SELECTOR')).then(canvas => {
            const link = document.createElement('a');
            link.download = 'screenshot.png';
            link.href = canvas.toDataURL();
            link.click();
        });
    }
}

In addition, you can raise a ticket in the Custom Visuals Development community for dedicated support.

Custom Visuals Development Discussion - Microsoft Fabric Community

Best Regards