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

Question

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>

Answer 1

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();
}
}