MatButton linked to a PDF with target "_blank" eventually throws TaskCanceledException

[Olby2000]

If a MatButton links to a PDF resource and has the target set to "_blank" after some time unhandled TaskCanceledException is raised.

1. Create Blazor Server Side project
2. Paste the following code in the Index.razor file:

<MatButton Link="https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf" Target="_blank"> Click here </MatButton>

3. Click the button and wait for about 30 seconds and you'll get the following error:

blazor.server.js:8 Uncaught (in promise) TypeError: Converting circular structure to JSON --> starting at object with constructor 'Window' --- property 'parent' closes the circle at JSON.stringify (<anonymous>) at blazor.server.js:8 (anonymous) @ blazor.server.js:8 Promise.then (async) beginInvokeJSFromDotNet @ blazor.server.js:8 (anonymous) @ blazor.server.js:1 e.invokeClientMethod @ blazor.server.js:1 e.processIncomingData @ blazor.server.js:1 connection.onreceive @ blazor.server.js:1 i.onmessage @ blazor.server.js:1 blazor.server.js:19 [2020-09-17T17:32:52.919Z] Error: System.Threading.Tasks.TaskCanceledException: A task was canceled. at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args) at MatBlazor.BaseMatComponent.JsInvokeAsync[T](String code, Object[] args) at MatBlazor.BaseMatButton.OnClickHandler(MouseEventArgs ev) at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_0(Object state) at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource 1 completion, SendOrPostCallback d, Object state) at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.<>c.<.cctor>b__23_0(Object state) at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state) --- End of stack trace from previous location where exception was thrown --- at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state) at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item) e.log @ blazor.server.js:19 C @ blazor.server.js:8 (anonymous) @ blazor.server.js:8 (anonymous) @ blazor.server.js:1 e.invokeClientMethod @ blazor.server.js:1 e.processIncomingData @ blazor.server.js:1 connection.onreceive @ blazor.server.js:1 i.onmessage @ blazor.server.js:1

Blazorfiddle does not seem to allow opening new tabs from within its code therefore link is not provided.

[Christian-Oleson]

I've opened a PR for this:
#737

[Christian-Oleson]

This is an issue with JSInterop, where it natively awaits the JS task, but does not throw an exception to show that the task timed out.
dotnet/aspnetcore#18875
dotnet/aspnetcore#21384
The second issue in the description indicates that MS will need to do something to allow a more specific exception that can be caught in the try/catch, though the TaskCanceledException is enough for now.

[Christian-Oleson]

@Olby2000 ,
The PR for this issue has now been merged to dev. It will be included in the next release. Let me know if you have any questions.

[GioviQ]

With

<MatButton Link="/api/localization/export">@L["Export"]</MatButton>

I have "page not found", instead of downloading.

[Christian-Oleson]

With

<MatButton Link="/api/localization/export">@L["Export"]</MatButton>

I have "page not found", instead of downloading.

This is something that should be resolved in the next release. Perhaps check out the dev version?

[GioviQ]

I will wait for next release.

In the meantime

<MatButton OnClick="@(e => { navigationManager.NavigateTo("/api/localization/export", true); })">@L["Export"]</MatButton>

[Christian-Oleson]

@GioviQ @Olby2000 @enkodellc ,
Is anybody able to close this issue now that it is resolved?

[zaina97]

how to export table data to pdf in matblazor!!!

[enkodellc]

You will have to convert the table dataset to pdf with a different tool in either the front or backend and then download it. You might find a JS library for it. I would suggest exporting via CSV as it is fast and simple via Blazor.

[Christian-Oleson]

You will have to convert the table dataset to pdf with a different tool in either the front or backend and then download it. You might find a JS library for it. I would suggest exporting via CSV as it is fast and simple via Blazor.

Personally, I use ServiceStack to take a list or enumerable and convert it to a CSV and a little bit of JS to then download it. @zaina97