I am trying to generate PDF with the custom design provided by my client using DinkToPdfLib. But during the creation of the .PDF file, no proper CSS is applied.
Can you please help me?
Here is my code:
[HttpGet]
public IActionResult Create()
{
var model = new GstInvoiceViewModel
{
InvoiceNo = "A0001",
InvoiceDate = DateTime.Today,
Items = new List<GstInvoiceItemViewModel>
{
new GstInvoiceItemViewModel { ItemName = "", Quantity = 1, Rate = 0, GstRate = 18 }
}
};
return View(model);
}
[HttpPost]
public async Task<IActionResult> Create(GstInvoiceViewModel model)
{
var htmlContent = await RazorTemplateEngine.RenderAsync("/Views/Invoice/InvoiceTemplate.cshtml", model);
var pdfDoc = new HtmlToPdfDocument
{
GlobalSettings = new GlobalSettings
{
PaperSize = PaperKind.A4,
Orientation = Orientation.Portrait,
Margins = new MarginSettings { Top = 10, Bottom = 10 }
},
Objects = {
new ObjectSettings
{
HtmlContent = htmlContent,
WebSettings = { DefaultEncoding = "utf-8" }
}
}
};
var pdfBytes = _converter.Convert(pdfDoc); // This will now work
return File(pdfBytes, "application/pdf", $"GST-Invoice-{model.InvoiceNo}.pdf");
}
And here is the .cshtml page; I have tried so many ways to apply the design but nothing works for me.
@model InvoiceGenerator.Models.GstInvoiceViewModel
@using System.IO
@using System
@{
Layout = null;
// Safely convert wwwroot path to forward-slash format for use in file:// links
var baseUrl = "https://localhost:7193"; // or your app's actual base URL/port
string cssPath = System.IO.Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "assets", "css", "style.css");
string cssContent = System.IO.File.Exists(cssPath) ? System.IO.File.ReadAllText(cssPath) : "";
string imagePath = System.IO.Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "assets", "img", "logos", "logo.png");
string imageBase64 = System.IO.File.Exists(imagePath)
? Convert.ToBase64String(System.IO.File.ReadAllBytes(imagePath))
: "";
}
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<title>INVO - Invoice HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@* <link rel="stylesheet" href="@($"{baseUrl}/assets/css/bootstrap.min.css")" />
<link rel="stylesheet" href="@($"{baseUrl}/assets/fonts/font-awesome/css/font-awesome.min.css")" /> *@
<style>
@cssContent
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700&display=swap" rel="stylesheet" />
</head>
<body>
<!-- Start your exact HTML template here (dynamically fill it using Razor) -->
<div class="invoice-1 invoice-content">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="invoice-inner clearfix">
<div class="invoice-info clearfix" id="invoice_wrapper">
<!-- Inject your dynamic Razor values here -->
<div class="invoice-headar">
<div class="row g-0">
<div class="col-sm-6">
<div class="logo">
<img src="data:image/png;base64,@imageBase64" alt="Logo" />
</div>
</div>
<div class="col-sm-6 invoice-id text-end">
<div class="info">
<h1 class="color-white inv-header-1">Invoice</h1>
<p class="color-white mb-1">Invoice Number <span>@Model.InvoiceNo</span></p>
<p class="color-white mb-0">Invoice Date <span>@Model.InvoiceDate.ToString("dd MMM yyyy")</span></p>
</div>
</div>
</div>
</div>
<!-- Continue your design -->
<!-- Replace static values like "Jhon Smith" with Razor model values -->
<div class="invoice-top">
<div class="row">
<div class="col-sm-6">
<div class="invoice-number mb-30">
<h4 class="inv-title-1">Invoice To</h4>
<h2 class="name mb-10">@Model.ToBusinessName</h2>
<p class="invo-addr-1">
GSTIN: @Model.ToGst<br />
PAN: @Model.ToPan
</p>
</div>
</div>
<div class="col-sm-6 text-end">
<div class="invoice-number-inner">
<h4 class="inv-title-1">Invoice From</h4>
<h2 class="name mb-10">@Model.FromBusinessName</h2>
<p class="invo-addr-1">
GSTIN: @Model.FromGst<br />
PAN: @Model.FromPan
</p>
</div>
</div>
</div>
</div>
<!-- Items Table -->
<div class="invoice-center">
<div class="table-responsive">
<table class="table mb-0 table-striped invoice-table">
<thead class="bg-active">
<tr>
<th>No.</th>
<th class="pl0 text-start">Item Description</th>
<th class="text-center">Price</th>
<th class="text-center">Quantity</th>
<th class="text-end">Amount</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.Items.Count; i++)
{
var item = Model.Items[i];
<tr>
<td>@(i + 1)</td>
<td class="pl0">@item.ItemName</td>
<td class="text-center">@item.Rate.ToString("F2")</td>
<td class="text-center">@item.Quantity</td>
<td class="text-end">@item.Total.ToString("F2")</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<!-- Summary -->
<div class="invoice-bottom mt-4">
<div class="row">
<div class="col-md-6">
<h3 class="inv-title-1">Terms & Conditions</h3>
<p>@Model.Terms</p>
</div>
<div class="col-md-6">
<table class="table table-bordered">
<tr><th>Sub Total</th><td>@Model.TotalAmount.ToString("F2")</td></tr>
<tr><th>CGST</th><td>@Model.TotalCgst.ToString("F2")</td></tr>
<tr><th>SGST</th><td>@Model.TotalSgst.ToString("F2")</td></tr>
<tr><th class="active-color">Grand Total</th><td class="active-color">@Model.GrandTotal.ToString("F2")</td></tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts -->
@*
<link rel="stylesheet" href="@($"file:///{Directory.GetCurrentDirectory()}/wwwroot/assets/js/jquery.min.js")" />
<link rel="stylesheet" href="@($"file:///{Directory.GetCurrentDirectory()}/wwwroot/assets/js/html2canvas.js")" />
<link rel="stylesheet" href="@($"file:///{Directory.GetCurrentDirectory()}/wwwroot/assets/js/jspdf.min.js")" />
*@
@*
<script src="~/assets/js/jquery.min.js"></script>
<script src="~/assets/js/jspdf.min.js"></script>
<script src="~/assets/js/html2canvas.js"></script> *@
@* <script src="~/assets/js/app.js"></script> *@
</body>
</html>
First I have tried using HTML, but that did not work.
Then I have tried iTextSharp. Did not work either, for me.
Then I have tried DinkToPdfLib. I am trying but still result is not as expected.
