Display PDF on new Page

Hi,
I have a razor page where I take user input parameters
image
on button click I generate a URL based on above user input. After that I open a new page and pass the URL parameter using this code

var dialogResult = await DialogService.OpenAsync<ViewReport>(RptOpt.ReportName1, new Dictionary<string, object>() { { "URL", strURL}});

My View Report Page Definition

<RadzenContent Container="main">
  <ChildContent>
    <RadzenHeading Size="H1" Text="ViewReport">
    </RadzenHeading>
    <RadzenHtml>
      <iframe src=@ReportURL style="height:600px;width:800px;" title="Report Preview"></iframe>
    </RadzenHtml>
  </ChildContent>
</RadzenContent>

I would like to display the above view report page as new browser TAB with full page view.
Is this the proper way to proceed or is there any other option.
Kindly advise .

Got it to work !

await JSRuntime.InvokeAsync<object>("open", strURL, "_blank");
1 Like

I tried two options to display PDF to user

  1. Using iframe inside HTML [Unable to display in new browser TAB]-Can we display the page in new browser TAB ?
  2. Using JSRuntime [Here the pdf download URL is visible to user]- Can we hide the pdf URL from user
    Kindly advise

You can display any Blazor page in a new tab. You cannot display an iframe element in a new page though.

No as far as I know.

While this does not directly address your question, Syncfusion offers a pretty robust PDF viewer that probably would have the end result of hiding the URL. They have a community edition that has some restrictions, but would probably work for many projects. I have not incorporated it into a Radzen project though. Below is a link to it along with an article I found about someone adding a different Syncfusion component with Radzen.

Adding a Syncfusion Blazor Chart and Pivot Table to a Radzen Project - Radzen IDE (Blazor server-side) - Radzen

For Option 1 I have a page called ViewReport and there are three parameters(used by the iframe object to call API and return pdf) to the page.
I want this page to open in new browser TAB but the parameters other than the page name should be be hidden from user. How can it be achieved. Kindly guide.

I have only one issue i.e pass hidden parameters to a page and open in new browser TAB. Thanks

Page parameters in Blazor are part of the URL so there is no way around that. You can try using global properties instead.

Hi Vinod,

You can also create a JS function that opens a new tab with an iframe and can pass the encoded string made from the pdf byte[] as a source to the iframe so that you can achieve both the thing a) able to show pdf in full-screen b) no URL will be there.

Thanks,
Shloke Ghenghat.

1 Like

Could not get it working since Global Property gets intialised to null in the new TAB Load event

Indeed services are reset when the page is open in a new browser tab - this is because Blazor creates another SignalR circuit. You can probably try this: ASP.NET Core Blazor state management | Microsoft Docs

I could get it working using below javascript

function showNewPdfTab(args,title) {
    const win = window.open(args["title"], "_blank");
    let html = '';

    html += '<html>';
    html += '<head><title>' + args["title"]+'</title></head>';
    html += '<body style="margin:0!important">';
    html += '<embed width="100%" height="100%" src="data:application/pdf;base64,' + args["data"] + '" type="application/pdf" />';
    html += '</body>';
    html += '</html>';

    setTimeout(() => {
        win.document.write(html);
    }, 0);
}

Thanks for your guidance :pray:

1 Like