Js function not found

I have a method that is supposed to trigger a download of a pdf, when a button is clicked. It collects data and stores it in a MemoryStream. At the end of that method a js function is called to provide the download:

                using var streamRef = new DotNetStreamReference(stream: memoryStream);
                await JSRuntime.InvokeVoidAsync("downloadFile", pdfname, streamRef); 

to provide the download:

async function downloadFile(fileName, contentStreamReference) {

    const arrayBuffer = await contentStreamReference.arrayBuffer();

    const blob = new Blob([arrayBuffer]);

    const url = URL.createObjectURL(blob);

    var link = document.createElement('a');
    link.download = fileName; // Dateiname fΓΌr den Download
    link.href = url; // URL der herunterladbaren Datei

    document.body.appendChild(link);

    link.click();

    document.body.removeChild(link);
}

The razor file points to the js file stored in the wwwroot folder

<script src="~/wwwroot/SaveFile.js"></script>

When I actually click the button I get the error message:

Error: Could not find 'downloadFile' ('downloadFile' was undefined).
    at https://localhost:5001/_framework/blazor.web.js:1:734
    at Array.forEach (<anonymous>)
    at l.findFunction (https://localhost:5001/_framework/blazor.web.js:1:702)
    at b (https://localhost:5001/_framework/blazor.web.js:1:5445)
    at https://localhost:5001/_framework/blazor.web.js:1:3238
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.web.js:1:3201)
    at gn._invokeClientMethod (https://localhost:5001/_framework/blazor.web.js:1:62841)
    at gn._processIncomingData (https://localhost:5001/_framework/blazor.web.js:1:60316)
    at connection.onreceive (https://localhost:5001/_framework/blazor.web.js:1:53957)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at ABschein.Components.Pages.Dienstplan.ExportClick(RadzenSplitButtonItem args) in C:\Verschiedenes\Arbeitsschein\Components\Pages\Dienstplan.razor.cs:line 346
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at Radzen.Blazor.RadzenSplitButtonItem.OnClick(MouseEventArgs args)
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Even If I put the code in a @code section in the razor file, as well as the complete js code in the section, the application is unable to find the js function.

Any suggestions, as to why this is happening, or how to do it differently (than using js)?

I think the problem is that the reference of the script is not correct so it cant be loaded so the function is undefined.
U should try to invoke the method from the browser console and see if u can call it.

I think by changing the ref of the script to this could resolve the problem:
<script src="~/SaveFile.js"></script>

This isn't the correct way to include a script file. Try this instead:

<script src="SaveFile.js"></script>
1 Like

That's the one. Thanks!