将 vue-qrcode 编译成 razorlight 和 dinktopdf

Question

我正在构建一个 POC，我在其中使用 razorlight 编译 index.cshtml，然后使用 dinktopdf 生成 pdf，到目前为止，我的那部分工作正常。

接下来，使用vuejs和vue-qrcode，我能够将二维码添加到页面，其中二维码标签被转换为canvas并显示二维码。

现在，我运行遇到的问题是在生成 pdf 的过程中，vue-qrcode 没有被编译成常规 html（它应该是 canvas 标签）并且没有向 pdf 添加任何内容。

解决方法如下Repository

page = await engine.CompileRenderAsync(path, model); 显示了 html 的完整字符串，您可以在其中看到二维码标签仍然保持原样。

    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

我能够使用纯 JavaScript QRCode 而不是 vue-qrcode 库来解决问题。

最终观点

@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>

将 vue-qrcode 编译成 razorlight 和 dinktopdf

Compiling vue-qrcode into razorlight and dinktopdf

javascript

c#

vue.js

dinktopdf

razorlight