I'm working on building a POC where I compile an index.cshtml using razorlight then generate a pdf using dinktopdf, so far I got that part working fine.
Next, using vuejs and vue-qrcode, I was able to add a qrcode to the page where qr-code tag is converted into canvas and the qrcode is being displayed.
Now, the issue I'm running into is that during the generation of the pdf, vue-qrcode isn't being compiled into regular html (it should be a canvas tag) and nothing is being added to the pdf.
The solution is in the following Repository
page = await engine.CompileRenderAsync(path, model); shows the full string of the html and in there you can see the the qr-code tag still remains as it is.
public async Task<byte[]> PrintPDFAsync()
{
var engine = new RazorLightEngineBuilder()
.UseFileSystemProject(Path.GetDirectoryName(Assembly.GetEntryAssembly().Location))
.UseMemoryCachingProvider()
.Build();
var model = new List<WeatherForecast>(Get());
string page = null;
try
{
var path = Path.Combine(Path.GetDirectoryName(Assembly.GetEntryAssembly().Location), $"Views/Home/Index.cshtml");
page = await engine.CompileRenderAsync(path, model);
}
catch (Exception e)
{
Console.WriteLine(e);
}
var doc = new HtmlToPdfDocument()
{
GlobalSettings = {
ColorMode = ColorMode.Color,
Orientation = Orientation.Landscape,
PaperSize = PaperKind.A4Plus
},
Objects = {
new ObjectSettings() {
PagesCount = true,
HtmlContent = page,
WebSettings = { DefaultEncoding = "utf-8" },
HeaderSettings = { FontSize = 9, Right = "Page [page] of [toPage]", Line = true, Spacing = 2.812 }
}
}
};
byte[] pdf = null;
try
{
pdf = _pdfConverter.Convert(doc);
}
catch (Exception e)
{
Console.WriteLine(e);
}
return pdf;
}
I was able to solve the issue using pure JavaScript QRCode instead of vue-qrcode library.
The final view
@model IEnumerable<POCWeb.Models.WeatherForecast>
@{
var BaseUrl = @Model.FirstOrDefault().BaseUrl;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="@BaseUrl/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="@BaseUrl/lib/vue/css/bootstrap-vue.min.css" />
</head>
<body>
<div id="app">
<header>
<div class="container">
<img src="@BaseUrl/img/logo.png" class="img-thumbnail">
</div>
</header>
<div class="container">
<main role="main" class="pb-3">
<table class="table">
<thead>
<tr>
<td>
Date
</td>
<td>
TemperatureC
</td>
<td>
Summary
</td>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@item.Date
</td>
<td>
@item.TemperatureC
</td>
<td>
@item.Summary
</td>
</tr>
}
</tbody>
</table>
</main>
</div>
<div class="container">
<div id="qrcode"></div>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - POCWeb - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<p id="log"></p>
</div>
<script src="@BaseUrl/js/qrcode.js"></script>
<script>
try {
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
var c = document.getElementById("log");
c.innerHTML = "printed";
}
catch (err) {
var c = document.getElementById("log");
c.innerHTML = "catch: " + err.messge;
}
</script>
</body>
</html>