Why the conversion from razor to pdf document doesnt appear the same as the website?

Question

im usin rotativa to convert my razor view to pdf documentation but there is issue it doesnt look the same as when it rendering to website here is my razor code

@model PieListViewModel

@{
    Layout = null;
}

<link href="@("https://" + Context.Request.Host.ToString() + "/css/site.css")" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Work+Sans' rel='stylesheet' type='text/css'>
@* http://localhost:port/StyleSheet.css *@


<div class="container">
  <div class="grid">
    <div class="Weight border-left border-bottom">
      <span class="margin-left">Id</span>
    </div>
    <div class="Weight border-left border-bottom">
      <span class="margin-left">Name</span>
    </div>
    <div class="Weight border-left border-bottom">
      <span class="margin-left">Price</span>
    </div>
    <div class="Weight border-left border-bottom">
      <span class="margin-left">Actions</span>
    </div>
        @foreach (var pie in Model.Pies)
        {

                <div class="Weight border-left border-bottom">
                  <span class="margin-left">@pie.PieId</span>
                </div>
                <div class="Weight border-left border-bottom">
                 <span class="margin-left">@pie.Name</span>
                </div>
                <div class="Weight border-left border-bottom">
                 <span class="margin-left">@pie.Price</span>
                </div>
                <div class="border-bottom weight border-left" >
                    <a asp-controller="Pie" asp-action="Details" asp-route-id="@pie.PieId" class="actions ">Details</a>
                    <a asp-controller="Pie" asp-action="EditPie" asp-route-pieId="@pie.PieId" class="actions">Edit</a>
                    <a class="actions">Delete</a>
                 </div>
                     
        }
  </div>
  
    
</div>

css code

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.border-bottom {
    border-bottom: solid 0.1rem rgb(142, 139, 139);
}
.container {
  width: auto;
  margin: 2rem 1rem;
}
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    justify-items: center;
}
.Weight {
  font-weight: 80%;
}
.border-left {
  border-left: solid 0.1rem rgb(142, 139, 139);
  width:100%;
  text-align:center;
}
.margin-left {
  margin-left: 0.5rem;
}
.actions {
  display: inline-block;
  color: rgb(241, 160, 7);
  text-decoration: underline;
}

website image

pdf rendering image

its supposed to be the same as website

111 1111 11111 111111 1111111 11111111 111111111 1111111111 11111111111

Answer 1

I haven't used rotativa, but have used other HTML-to-PDF products with similar difficulties. In my experiences, the converter product was not able to find the external CSS file. Perhaps rotativa cannot find your site.css file.

Here are some things to try.

Comment out the <link> element that contains your external site.css file and embed its CSS directly in the Razor view. If rotativa renders the PDF correctly, then rotativa probably wasn't able to find your CSS file earlier. Then uncomment the <link>, remove the embedded CSS, and verify that dynamically-built path in the <link>'s href attribute is something that rotativa can access.

If it still doesn't work, see if rotativa has any documentation that explains what to do when styling is missing. On one HTML-to-PDF product I used, the product needed a <base> element to find external CSS files.