Блог

Главная - Вопросы по программированию - Компиляция vue-qr-кода в razorlight и dinktopdf

Компиляция vue-qr-кода в razorlight и dinktopdf

#javascript #c# #vue.js #dinktopdf #razorlight

#javascript #c# #vue.js #dinktopdf #razorlight

Вопрос:

Я работаю над созданием POC, в котором я компилирую index.cshtml с помощью razorlight, а затем создаю PDF-файл с помощью dinktopdf, пока у меня эта часть работает нормально.

Затем, используя vuejs и vue-qrcode, я смог добавить qr-код на страницу, где тег qr-кода преобразуется в canvas и отображается qr-код.

Теперь проблема, с которой я столкнулся, заключается в том, что во время создания PDF-файла vue-qrcode не компилируется в обычный html (это должен быть тег canvas), и в PDF-файл ничего не добавляется.

Решение находится в следующем репозитории

page = await engine.CompileRenderAsync(path, model); показывает полную строку HTML-кода, и там вы можете увидеть, что тег qr-кода по-прежнему остается таким, какой он есть.

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

Комментарии:

1. Прошу прощения. Обновлено.

2. Я не знаком с dinktopdf, но поддерживает ли он выполнение Javascript на странице? И ваша страница — это больше, чем просто QR-код, верно?

3. @John Да, Dinktopdf поддерживает javascript. Но я столкнулся с проблемой, из-за которой он не распознает библиотеку vue-qrcodoe. Да, он содержит изображения и таблицу, которые заполнены моделью.

Ответ №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">
                amp;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>
Метки: