Compiling vue-qrcode into razorlight and dinktopdf

Question

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

Answer 1

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">
                &copy; 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>

Compiling vue-qrcode into razorlight and dinktopdf

Question

1 answers

solution1
0 ACCPTED 2020-11-29 07:39:53

Compiling vue-qrcode into razorlight and dinktopdf

Question

1 answers

solution1 0 ACCPTED 2020-11-29 07:39:53

solution1
0 ACCPTED 2020-11-29 07:39:53