Pdf viewer should display form fields like Text fields, check boxes, etc and allow users to type in fields. Also support form field calculations.
Once populated, allow client side save to a file blob so that the data could be posted to a server or really whatever the dev wanted to do with it.
Please expose a parameter to show or hide the "Select files..." button inside the empty PDF Viewer.
Currently, a possible workaround is to use CSS. Additionally, you may configure the Toolbar to not include the "Open" tool.
<style>
.no-open .k-blank-page {
display: none;
}
/* Use these selectors if you want to separately target the upload or the dropzone */
/* .no-open .k-external-dropzone,
.no-open .k-upload{
display: none;
} */
</style>
<TelerikPdfViewer Data="@PdfSource"
OnOpen="@OnPdfOpen"
Height="600px"
Class="no-open">
<PdfViewerToolBar>
<PdfViewerToolBarDownloadTool />
<PdfViewerToolBarPrintTool />
<PdfViewerToolBarSpacer />
<PdfViewerToolBarPagerTool />
<PdfViewerToolBarSpacer />
<PdfViewerToolBarZoomTool />
<PdfViewerToolBarSelectionTool />
<PdfViewerToolBarSearchTool />
<PdfViewerToolBarAnnotationsTool />
</PdfViewerToolBar>
</TelerikPdfViewer>
@code {
private byte[] PdfSource { get; set; }
private bool LoaderVisible { get; set; }
private async Task OnPdfOpen(PdfViewerOpenEventArgs args)
{
// Cancel the event for additional precaution in case someone bypasses the CSS and forces the page to show the button and the dropzone.
args.IsCancelled = true;
}
}
The loading animation is visible only when a user opens a file from the Toolbar of the component. When programmatically opening a file, the loader is not shown.
I want to have an option for digital signatures with browser-based certificate selection.
===
ADMIN EDIT
===
For the time being, you can use the following custom approach: Signing PDFs with PdfPRocessing in PdfViewer.
The PDF Viewer fails to display the loaded document if StateHasChanged() is called when the Data parameter is set.
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
PdfViewerData = await System.IO.File.ReadAllBytesAsync(......);
await Task.Delay(1);
StateHasChanged();
}
await base.OnAfterRenderAsync(firstRender);
}
Test Page (run this in a server app):
<h1>PDF Viewer Tests</h1>
<h2>Load Initially</h2>
<TelerikPdfViewer Data="@FileData1"
EnableLoaderContainer="true"
Height="30vh"
Zoom="0.75m">
</TelerikPdfViewer>
<h2>Load On Demand</h2>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
OnClick="@( async () => await LoadPdf(2) )">Load PDF</TelerikButton>
<TelerikPdfViewer Data="@FileData2"
EnableLoaderContainer="true"
Height="30vh"
Zoom="0.75m">
</TelerikPdfViewer>
@code {
private byte[]? FileData1 { get; set; }
private byte[]? FileData2 { get; set; }
protected async override Task OnInitializedAsync()
{
await LoadPdf(1);
}
public async Task LoadPdf(int id)
{
await Task.Delay(1000);
if (id == 2)
{
FileData2 = Convert.FromBase64String(PdfBase64);
}
else
{
FileData1 = Convert.FromBase64String(PdfBase64);
}
StateHasChanged();
await Task.Delay(300);
}
private const string PdfBase64 = "JVBERi0xLjEKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDEvTWVkaWFCb3ggWy00MCAtNjQgMjYwIDgwXSA+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9Gb250PDwvRjE8PC9UeXBlL0ZvbnQvU3VidHlwZS9UeXBlMS9CYXNlRm9udC9BcmlhbD4+ID4+ID4+L0NvbnRlbnRzIDQgMCBSPj5lbmRvYmoKNCAwIG9iajw8L0xlbmd0aCA1OT4+CnN0cmVhbQpCVAovRjEgMTggVGYKMCAwIFRkCihUZWxlcmlrIFBkZlZpZXdlciBmb3IgQmxhem9yKSBUagpFVAplbmRzdHJlYW0KZW5kb2JqCnhyZWYKMCA1CjAwMDAwMDAwMDAgNjU1MzUgZgowMDAwMDAwMDIxIDAwMDAwIG4KMDAwMDAwMDA4NiAwMDAwMCBuCjAwMDAwMDAxOTUgMDAwMDAgbgowMDAwMDAwNDkwIDAwMDAwIG4KdHJhaWxlciA8PCAgL1Jvb3QgMSAwIFIgL1NpemUgNSA+PgpzdGFydHhyZWYKNjA5CiUlRU9G";
}
I want to detect when a user has added or removed an annotation in the PDF Viewer.
Open the PDF Viewer component online demo and click the download button:
Expected - the PDF must be downloaded.
Current - the file is not downloaded.
When you search for a term, the document is not scrolled. Also when the user inserts a search term and clicks Enter the document is scrolled to the second match instead of the first one.
After clicking the Print button, the pages are ordered incorrectly. Can be seen in the preview window.
Steps to reproduce:
1. Open https://demos.telerik.com/blazor-ui/pdfviewer/overview
2. Click the Print button
Trying to upload a large file from a mobile device breaks the component.
Step to reproduce:
The issue can be reproduced only in version 8.0.0