I have a Blazor app with a pdf save function using the html2pdf library. I pass the HTML string to the library using a JS function. Currently, it captures the HTML string but not the CSS style list which I defined globally and included in my _Host.cshtml file. I’ve also tested that it does apply the style to the razor page, but not the .pdf file.

Currently, my code looks like this:

Page1.razor:

    <Button OnClick="@Save"></Button>
    <div id="PrintContent">
       <div style="top:20px;left:2px" class="title1">My Title</div>
       ...
       <table style="position:absolute" class="table1 type1">
       ...
       </table>
    </div>

Page1.razor.cs:

async Task Save()
{
   try
   {
      await JSRuntime.InvokeAsync<string>("getElementContent", "#PrintContent")
   }
   catch (Exception e)
   {
   ...
   }
}    

PageStyling.css:

    <style>
    #PrintContent .title1 {
       font-size: 2.4rem;
    }
    ...
    </style>

pdffunction.js:

    window.printButton = function(printContent) {
       try {
       var element = printContent;
    
       html2pdf(element);
       }
    }

I can change it to inline styling but would prefer to avoid that as there are over 90 classes already defined, and the div itself is quite large. Any help would be greatly appreciated!