Blazor Open a page in a new Browser tab using navigation manager?

Question

Could please advise me the way of open a page in new tab using Navigation manager and how to show pdf file in browser window?

Answer 1

Hi, @Anantham.S ,

The way of open a page in new tab

Try JSRuntime.InvokeAsync to open in new tab.

    await JSRuntime.InvokeAsync<object>("open", "navigate", "_blank");  

show pdf file in browser window

You can open pdf file directly via a tag.

    <a href="./HelloWorld.pdf" target="blank">Go to Hello</a>  

------
If the answer doesn’t solve your issue, please provide more details of error that will help us track down what’s happening.
If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,
Michael Wang

Answer 2

I am very new to this Blazor Server framework. But I have been having the same 'JS Converting circular structure ' until I noticed that the two calls were slightly different: await JSRuntime.InvokeAsync<object>("open", url, "_blank"); fails await JSRuntime.InvokeVoidAsync("open", url, "_blank"); solves the problem.

Answer 3

Confirmed. I got the same error when using this. But it is interessting to see that the new tab is open and shows the correct page. But after successfully open the tab, the task is throwing an error due to the task has cancelled.

Edit: I tried to add an CancellationToken.Null as a parameter and it seems to work without exception.

await _js.InvokeAsync<object>("open", CancellationToken.None, url);

Answer 4

It's giving following error!!

blazor.webassembly.js:1 Uncaught (in promise) TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Window'
--- property 'window' closes the circle
at JSON.stringify (<anonymous>)
at blazor.webassembly.js:1

Answer 5

If getting the TypeError exception message, use this instead:
await JSRuntime.InvokeVoidAsync("open", url, "_blank");