Blazor Capture Element

Capture an element and export it to desired format (currently support PDF export).

Features:

JavaScript Usage: Enables dynamic functionality with JavaScript.

Rendering options: Render your component as various HTML tags for maximum flexibility and integration.

Learn about core component features

Simple capture

<BlazorCaptureElement Token="capture-element-token">
    ...
</BlazorCaptureElement>
<BlazorCapturePdfButton Variants="new[] {BaseVariants.Primary}" TargetToken="capture-element-token" OnPopupBlocked="ShowPopupBlockedMessage">Click here to capture as PDF</BlazorCapturePdfButton>

@code {
    public string Message { get; set; } = "";

    public void ShowPopupBlockedMessage()
    {
        Message = "Popup blocked";
    }
}

In this code snippet, we have an example usage of the BlazorCaptureElement component along with various BlazorButton elements inside it. The BlazorCaptureElement component allows capturing elements and their content to be exported later, such as for PDF generation.

The last part of the code features a BlazorCapturePdfButton, which uses the BlazorCaptureElement by specifying its TargetToken parameter. When clicked, this button triggers the capture of the specified content and generates a PDF. If a popup is blocked during the process, the OnPopupBlocked method is called to handle the event.

Capture button inside element

When the capture button is located inside the <BlazorCaptureElement> component, there is no need to specify the token for both components. This simplifies the code and ensures a smooth integration. Here's a code sample demonstrating this scenario:

This is a paragraph inside the capture element.

<BlazorCaptureElement>
    <p>This is a paragraph inside the capture element.</p>
    <BlazorCapturePdfButton Variants="new[] { BaseVariants.Primary }">Capture Me!</BlazorCapturePdfButton>
</BlazorCaptureElement>

Capturing Process and Browser-Side Execution:

The capturing process within the Blazor Library is performed entirely at the browser side, ensuring a seamless and efficient user experience. When capturing content, the result is a What You See Is What You Get (WYSIWYG) representation, accurately reflecting the content's appearance as the user sees it on the screen.

Preserving User-Installed Add-ons:

Blazor's capturing process respects user-installed add-ons, such as Dark Reader, which may modify the website's visual appearance. The captured result remains consistent with the user's view, preserving the specific modifications applied by such add-ons.

Optimizing for PDF Export:

For users intending to export the captured content as a PDF, it's essential to check the "Save as PDF" option provided by their browser's print functionality. Enabling this option ensures a smooth PDF export process and accurate representation of the captured content.

Including Backgrounds in PDF Export:

To achieve the best results when exporting content to PDF, users should also check the option to "Print backgrounds" in their browser's print settings. This ensures that background elements, such as images and styling, are correctly included in the PDF, providing a comprehensive representation of the captured content.

Appearance Customization

Learn about Theme Feature
Component & Variants CSS class
BlazorButton btn
BlazorButton.small btn-sm
BlazorButton.large btn-lg
BlazorButton.primary btn-primary
BlazorButton.secondary btn-secondary
BlazorButton.success btn-success
BlazorButton.danger btn-danger
BlazorButton.warning btn-warning
BlazorButton.info btn-info

Parameters

BlazorCaptureElement

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorCapturePdfButton

Name Type Description
OnPopupBlocked EventCallback When a popup is blocked, this event is triggered, providing developers with an opportunity to display informative messages to users, guide them on how to unblock popups, or suggest alternative actions to complete the capture process.
OnClick EventCallback Triggered by clicking on the button.
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Variants string[] Specifies the variant of the component.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙