Capture Screenshot of Custom Visual with Button

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

Hi Anonymous 

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.