Trying to upload a large file from a mobile device breaks the component.
Step to reproduce:

1. Open this REPL example on a mobile device
2. Click the "Load Data" button.

The issue can be reproduced only in version 8.0.0

Related to PDF Viewer does not display editable Acro fields, which was fixed in version 8.0, but the problem with readonly Acro fields persisted.

This is a regression in version 7.0.0. Version 6.2.0 displays all the acro field values as expected.

When a user invokes a Search tool, their intention is to directly write a text to search, therefore the edit for the search text should be focused immediately. In the current implementation, users have to manually focus the edit all the time, which is really inconvenient.

Rebinding the PDF Viewer multiple times leads to an ever increasing memory usage, which can ultimately cause a browser crash.

The issue started with Telerik UI for Blazor version 8.0.0 and does not occur in 7.1.0.

Test Page: https://blazorrepl.telerik.com/QTayOxvQ090qYPsb50

The PdfViewer GetFileAsync() method works in version 11.3.0, but only if the PDF Viewer loads a file by default. If the component renders blank and the user opens a file first, then the method still doesn't work and returns null.

Test page: https://blazorrepl.telerik.com/cpvuGQby16J4JlsE42

<p>Load a PDF file from your computer in both PDF Viewers and click the buttons.</p>

<strong>@TestResult</strong>

<br /><br />

<TelerikButton OnClick="@OnLoadButtonClick1" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Get Current PDF 1</TelerikButton>

<TelerikPdfViewer @ref="@PdfViewerRef1"
                  Data="@PdfViewerData1"
                  AnnotationMode="@PdfViewerAnnotationMode.EnableForms"
                  Height="400px">
</TelerikPdfViewer>

<TelerikButton OnClick="@OnLoadButtonClick2" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Get Current PDF 2</TelerikButton>

<TelerikPdfViewer @ref="@PdfViewerRef2"
                  Data="@PdfViewerData2"
                  AnnotationMode="@PdfViewerAnnotationMode.EnableForms"
                  Height="400px">
</TelerikPdfViewer>

@code {
    #nullable enable

    private TelerikPdfViewer? PdfViewerRef1 { get; set; }
    private TelerikPdfViewer? PdfViewerRef2 { get; set; }
    private byte[]? PdfViewerData1 { get; set; }
    private byte[]? PdfViewerData2 { get; set; }

    private string TestResult { get; set; } = string.Empty;

    private async Task OnLoadButtonClick1()
    {
        var pdfSource = await PdfViewerRef1!.GetFileAsync();
        TestResult = $"First PDF Viewer GetFileAsync() returned {pdfSource} at {DateTime.Now.ToString("HH:mm:ss")}";
    }

    private async Task OnLoadButtonClick2()
    {
        var pdfSource = await PdfViewerRef2!.GetFileAsync();
        TestResult = $"Second PDF Viewer GetFileAsync() returned {(pdfSource != null ? pdfSource.ToString() : "null")}  at {DateTime.Now.ToString("HH:mm:ss")}";
    }

    protected override void OnInitialized()
    {
        PdfViewerData1 = Convert.FromBase64String(PdfBase64);
    }

    private const string PdfBase64 = "JVBERi0xLjEKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDEvTWVkaWFCb3ggWy0zMCAtNjQgMjcwIDgwXSA+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9Gb250PDwvRjE8PC9UeXBlL0ZvbnQvU3VidHlwZS9UeXBlMS9CYXNlRm9udC9BcmlhbD4+ID4+ID4+L0NvbnRlbnRzIDQgMCBSPj5lbmRvYmoKNCAwIG9iajw8L0xlbmd0aCA1OT4+CnN0cmVhbQpCVAovRjEgMTggVGYKMCAwIFRkCihQREYgRmlsZSAuLi4pIFRqCkVUCmVuZHN0cmVhbQplbmRvYmoKeHJlZgowIDUKMDAwMDAwMDAwMCA2NTUzNSBmCjAwMDAwMDAwMjEgMDAwMDAgbgowMDAwMDAwMDg2IDAwMDAwIG4KMDAwMDAwMDE5NSAwMDAwMCBuCjAwMDAwMDA0OTAgMDAwMDAgbgp0cmFpbGVyIDw8ICAvUm9vdCAxIDAgUiAvU2l6ZSA1ID4+CnN0YXJ0eHJlZgo2MDkKJSVFT0Y=";
}

Nice job on Telerik, Kendo UI and Test Studio R3 2022!   I like the PDF Viewer UI Controls.  Question: Any plans to add annotations and comments to CLIENT-SIDE ONLY solution i.e. .NET Blazor MAUI libraries similar to this server-side only solution

When the user scrolls the PDF Viewer down and then opens another PDF file, the new document should display on the first page. Currently, the new file displays scrolled to the page from the previous file and the user must scroll to the top manually.

===

A possible workaround is to scroll the PDF file with JavaScript in the PDF Viewer OnOpen event:

@inject IJSRuntime js

<TelerikPdfViewer Data="@PdfSource"
                  Height="600px"
                  OnOpen="@OnPdfViewerOpen"
                  Class="@PdfViewerClass">
</TelerikPdfViewer>

<script suppress-error="BL9992">
    function scrollPdfToTop(selector) {
        var pdfCanvas = document.querySelector(selector);
        if (pdfCanvas) {
            pdfCanvas.scrollTop = 0;
        }
    }
</script>

@code {
    private byte[]? PdfSource { get; set; }

    private string PdfViewerClass { get; set; } = "scrollable-pdf-viewer";

    private async Task OnPdfViewerOpen()
    {
        await js.InvokeVoidAsync("scrollPdfToTop", $".{PdfViewerClass} .k-pdf-viewer-canvas");
    }
}

Hello,

we are using the PDFViewer Component. 

The zoom function usually works perfectly, both on mobile and desktop.

But there is one exception.

There is one scenario, where our PO got an crash, when he try to use ANY zoom functionality of the component. 

He is using:

• a Samsung Galaxy S21 FE 5G
• Android 14
• Chrome Browser

Acro field values don't show in the PDF VIewer, although they display in the print preview dialog.

This is a regression in version 7.0.0. Version 6.2.0 displays the acro field values as expected.

===

TELERIK edit: This public item originally concerned to all Acro fields. We fixed the problem for editable Acro fields, while the fix for readonly ones can be tracked at PDF Viewer does not display readonly Acro fields

The PDF Viewer uses adopted stylesheets, but removes third-party ones in the process.

This occurs since Telerik UI for Blazor version 7.0.0.

The workaround is to duplicate the third-party adoptedStylesheet as a regular CSS file.

Description

The byte array returned by the GetFileAsync method is different when the file is opened through the PDFViewer's toolbar, and when the file is loaded initially using the Data parameter of the PDFViewer.

Steps To Reproduce

1. Use the example below and the attached exemplary .pdf document.
2. Place a breakpoint in OnDownloadExportedFileClick
3. Run the example.
   Scenario 1: when the page loads and the attached file is loaded in the PDFViewer, click the button above the PDFViewer.
   Scenario 2: when the page loads, open the attached file in the PDFViewer, through the Open toolbar tool. Click the button above the PDFViewer.

@using System.IO
@inject IJSRuntime JSRuntimeInstance
@inject HttpClient HttpClient
@inject NavigationManager NavigationManager

<PageTitle>Home</PageTitle>

<p>
    <TelerikButton OnClick="@OnDownloadExportedFileClick">Get file with GetFileAsync and download</TelerikButton>
</p>

<strong>@TestResult</strong>

<br />
<br />

<TelerikPdfViewer @ref="@PdfViewerRef"
                    Data="@PdfViewerData"
                    AnnotationMode="@PdfViewerAnnotationMode.EnableForms"
                    Height="400px">
</TelerikPdfViewer>

@code {
    #nullable enable

    private TelerikPdfViewer? PdfViewerRef { get; set; }
    private byte[]? PdfViewerData { get; set; }

    private string TestResult { get; set; } = string.Empty;

    public async Task OnDownloadExportedFileClick()
    {
        var result = await PdfViewerRef.GetFileAsync();

        TestResult = $"First PDF Viewer GetFileAsync() returned {result} at {DateTime.Now.ToString("HH:mm:ss")}";

        var base64String = Convert.ToBase64String(result);
        var dataUrl = ToDataUrl("application/pdf", base64String);
        _ = SaveFileAsDataUrlAsync("export.pdf", dataUrl);
    }

    private protected ValueTask SaveFileAsDataUrlAsync(string fileName, string dataUrl)
    {
        return InvokeVoidAsync("saveFile", fileName, dataUrl);
    }

    protected virtual ValueTask InvokeVoidAsync(string methodName, params object[] args)
    {
        try
        {
            return JSRuntimeInstance.InvokeVoidAsync($"TelerikBlazor.{methodName}", args);
        }
        catch (Exception)
        {
            return default;
        }
    }

    private protected string ToDataUrl(string mimeType, string base64String)
    {
        return $"data:{mimeType};base64,{base64String}";
    }

    protected override async Task OnInitializedAsync()
    {
        PdfViewerData = System.IO.File.ReadAllBytes(@"pdf-viewer-form-filling-original.pdf");
        await Task.Delay(1);
    }
}

pdf-viewer-form-filling-original.pdf

Actual Behavior

The breakpoint in OnDownloadExportedFileClick is hit. Observe the difference in the byte array returned by the GetFileAsync method and saved in the "result" variable:

Expected Behavior

The byte array should be identical, regardless of the method of opening the file in the PDFViewer.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

No response

I use TelerikPdfViewer to let my users annotate PDF documents (highlights, text boxes, drawings). Since the component only provides a built-in Download button (client-side) and not a Save to backend, I implemented a custom Save button that:

1. Calls await pdfViewerRef.GetFileAsync() to retrieve th e annotated PDF as byte[].
2. Sends the bytes to my server via a Blazor service call.
3. The server persists them to a file share with File.WriteAllBytesAsync(path, bytes).

Simplified:

<PdfViewerToolBarCustomTool>
    <TelerikButton OnClick="@SaveAnnotationsAsync">Save</TelerikButton>
</PdfViewerToolBarCustomTool>

var annotatedPdf = await pdfViewerRef.GetFileAsync();
await _scanFlowApi.SaveAnnotatedDocumentAsync(documentId, annotatedPdf);
// server-side: await File.WriteAllBytesAsync(path, annotatedPdf, ct);

It works — the annotations are saved and I can reopen the file in the viewer without issues. But after saving and opening the file in Adobe Reader, closing it shows the prompt "Do you want to save the changes made to this document?" — even though the user hasn't modified anything in Adobe. The PDF seems to contain incremental updates appended at the end.

I would like to have access to the search option of the pdf viewer.
I have an old Asp.net framework site hosting the scanned pages (57.000) of the local newspaper from its start in May 1945 and want to rewrite it in Blazor.

One of the features is that you can search for words on all pages (using SQL Full-text indexing search on a table with all the plain texts to quickly locate the pages containing these words) and when a found page is clicked show the pdf of that page and prefill the searchbox of the pdf viewer to automatic highlight the found words).

This article gives a solution to achieve that in JS, but it would be nice if this could be done from de C# code https://www.telerik.com/forums/open-pdfviewer-with-highlighted-text

Kind regards,

Kees Alderliesten