CODEWITHSUNDEEP
htmlrazorblazor
Kiki
Kiki

Reputation: 41

Blazor | if there's any method to convert the Razor Pages to HTML

I'm using Blazor Sever to make a website. And there's a need that i should convert my razor page to htmlpage.So taht i can use my HTMLtoPDF interface to let customers to download their project.DO you have any ideas?

Such as the following Razor page.There're many variables and custom components in this page,how can i convert it to a static HTML page? Thanks a lot !!!

<div id="ABS" class="text-left">
        <table style="border:black solid;font-weight:bold;font-size:12px" width="1200" cellspacing="0" cellpadding="0" border="1">
            <tr class="text-center" style="background-color: #99CCFF">
                <td width="300">描述 <br> Description </td>
                <td width="500">标准选项  <br> Standard Option</td>
                <td width="400">备注  <br> Comments</td>
            </tr>
            <ABS_HU ABSTI_HU="@ABSTI.HU" IsExpended="@IsExpendAll" />
            <ABS_WSS ABSTI_WSS="@ABSTI.WSS" IsExpended="@IsExpendAll" />
            <ABS_SYSTEM ABSTI_System="@ABSTI.System" IsExpended="@IsExpendAll" />
            <tr>
                <td style="background-color: #CCFFFF" width="300" class="text-center">
                </td>
                <td width="500" class="text-center">
                </td>
                <td style="background-color: #CCFFFF" width="400">
                </td>
            </tr>
        </table>
    </div>

Upvotes: 2

Views: 1694

Answers (1)

Just the benno
Just the benno

Reputation: 2601

I assume the customer sees the report first and then click a button like "save."

The general idea is to let the client (browser) render your component, send the "raw HTML" back to the server, and then you can use your HTMLtoPDF.

Let's create the javascript function. Maybe there are ways to do it with vanilla js as well. You could add these lines to your _Host.cshtml file.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>

    <script type="text/javascript">
        window.copyHtml = function () {
          return $("html").html();
        };

    </script>

In your Blazor component, inject IJSRuntime and call the method when the button is clicked.


@inject IJSRuntime js

@* all the other components here *@

<button class="btn btn-primary" @onclick="GenerateHtml">Save Report</button>


@code {
   
    private async Task GenerateHtml()
    {
        String result = await  js.InvokeAsync<String>("copyHtml", Array.Empty<Object>());

        //in a wasm project, use HttpClient to send the data to the API
 
        //as a "proof," it is sent back to the server
        Console.WriteLine(result);


        //send to HTMLtoPDF
    }

}

In case the saving should be done without clicking a button, the Blazor component lifecycle can help. In the lifecycle of a component, when the rendering is finished, the method OnAfterRenderAsync is executed. So, you can override it and generate the HTML there.


protected override async Task OnAfterRenderAsync(bool firstRender)
{
        await base.OnAfterRenderAsync(firstRender);

        if(firstRender == true)
        {
            await GenerateHtml();
        }
}

Upvotes: 4

Related Questions