Gizmo.Web.JSInterop 2.0.0-preview

Gizmo.Web.JSInterop

A .NET library providing JavaScript interoperability functions for Blazor applications.

Requirements

• .NET 9.0
• Blazor WebAssembly or Blazor Server

Installation

Add a reference to the Gizmo.Web.JSInterop package in your Blazor project:

dotnet add package Gizmo.Web.JSInterop

Features

Clipboard API

• Permission Management

  • Check clipboard read permissions
  • Check clipboard write permissions

• Text Operations

  • Read text from clipboard
  • Write text to clipboard

• Image Operations

  • Read images from clipboard
  • Write images to clipboard

• Advanced Operations

  • Write multiple formats (text and image) simultaneously

Printer API

• Element Printing

  • Print specific HTML elements
  • Print arbitrary HTML content

• Element Selection

  • Interactive element selection
  • Print selected element

Usage Examples

Basic Clipboard Operations

@inject IJSRuntime jsRuntime

@code {
    var clipboardApi = new ClipboardApi(jsRuntime);
    
    private async Task CopyTextToClipboard(string text)
    {
        if (await clipboardApi.CanWrite())
        {
            await clipboardApi.WriteText(text);
        }
    }

    private async Task<string> GetTextFromClipboard()
    {
        if (await clipboardApi.CanRead())
        {
            return await clipboardApi.ReadText();
        }
        return string.Empty;
    }
}

Working with Images

@inject IJSRuntime jsRuntime

@code {
    var clipboardApi = new ClipboardApi(jsRuntime);
    
    private async Task CopyImageToClipboard(byte[] imageData)
    {
        if (await clipboardApi.CanWrite())
        {
            await clipboardApi.WriteImage(imageData, "image/png");
        }
    }
    
    private async Task<byte[]?> GetImageFromClipboard()
    {
        if (await clipboardApi.CanRead())
        {
            return await clipboardApi.ReadImage();
        }
        return null;
    }
}

Printing HTML Elements

@inject IJSRuntime jsRuntime

@code {
    var printerApi = new PrinterApi(jsRuntime);
    private ElementReference myElement;
    
    private async Task PrintElement()
    {
        await printerApi.PrintElement("#my-element");
        await printerApi.PrintElement(myElement);
    }
    
    private async Task PrintElementContent()
    {
        string htmlContent = "<h1>Custom Report</h1><p>This is a test report.</p>";
        await printerApi.PrintElementContent(htmlContent);
    }
}

Using the Element Selection Tool

@inject IJSRuntime jsRuntime
@page "/element-selector"

<div class="controls">
    <button @onclick="ActivateSelection">Select Element</button>
    <button @onclick="DeactivateSelection">Cancel Selection</button>
    <button @onclick="PrintSelectedElement">Print Selected Element</button>
</div>

<div class="content-area">
    <div id="printable-area">
        <h2>Sample Content</h2>
        <p>This is a sample paragraph that you can select and print.</p>
        <table border="1">
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
        </table>
    </div>
</div>

@code {
    var printerApi = new PrinterApi(jsRuntime);
    
    private async Task ActivateSelection()
    {
        await printerApi.ActivateSelection(
            highlightColor: "rgba(255, 193, 7, 0.3)",
            highlightBorder: "2px dashed #ffc107"
        );
    }
    
    private async Task DeactivateSelection()
    {
        await printerApi.DeactivateSelection();
    }
    
    private async Task PrintSelectedElement()
    {
        await printerApi.PrintSelectedElement();
    }
}

Browser Compatibility

The Clipboard API relies on the browser's implementation of the Clipboard API. Functionality may vary depending on:

• Browser vendor and version
• Security context (HTTPS is generally required)
• User permissions and browser settings

Most modern browsers (Chrome, Edge, Firefox, Safari) support the core clipboard functionality, but permission handling may differ between implementations.

The Printer API uses standard browser printing functionality but may have limitations:

• Popup blockers can interfere with the print window
• Some styling might not be preserved when printing
• Selection tools work best in modern browsers with proper event handling