将 HTML 中的图像打印为 bakgrounds 以 PDF 格式查看

Question

我正在努力打印一个简单的证书模板，我目前的问题是：

我需要设置两张背景图片，首页和后台。目前我通过标签使用一些 css 定位来设置它们。
当我设置所有布局时，它们在 HTML 视图中都很好，但是，一旦我尝试从浏览器或自定义插件（rotativa wkhtmlpdf），布局变得混乱，所有格式都消失了。

代码如下： PS。 @img_frente 和@img_verso 是图片作为背景的 base64 字符串。

 @@font-face {
            font-family: fonteMaior;
            src: url("../../Content/fonts/DINNextLTPro-Condensed.otf")
        }
/*        @@font-face {
            font-family: fonteMenor;
            src: url("../../Content/fonts/")
        }*/
        html {
            margin: 0 0;
            padding: 0;
        }

        body {
            margin: 0 0;
            font-family: fonteMaior;
            font-size: 28px;
            color: #464646;
        }

        .line {
            height: 20px;
            border-bottom: 1px solid #D1D1D1 !important;
            position: center;
        }

        * {
            -webkit-print-color-adjust: exact !important;
            page-break-inside: avoid !important;
        }

        .container {
            position: relative;
            text-align: center;
        }

        .mainText {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .qrcode {
            position: absolute;
            bottom: 72px;
            left: 100px;
            border: 1px solid #D1D1D1 !important;
        }

        .registro {
            position: absolute;
            bottom: 120px;
            left: 265px;
        }

        .instrutor {
            position: absolute;
            bottom: 120px;
            left: 812px;
            width: 300px;
        }
        .verso {
            position: relative;

        }
        .conteudos {
            position: absolute;
            bottom: 430px;
            left: 135px;
        }

        @@media screen, print {
            html, body, #xxl {
                margin: 0;
                padding: 0;
                border: 0;
                font-family:fonteMaior;
                font-size:28;
            }

            #printable {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 14px;
            }

            img{
                display:inline;
            }
                #printable ~ * {
                    display: none;
                    -webkit-print-color-adjust: exact !important;
                    page-break-inside: avoid !important;
                }
        }

查看：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="~/Scripts/js/library/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="~/Scripts/js/library/bootstrap.min.js"></script>
        <script type="text/javascript" src="~/Scripts/js/library/jquery.appear.min.js"></script>
        <script type="text/javascript" src="~/Scripts/js/library/jquery.easing.min.js"></script>
        <link rel="stylesheet" type="text/css" media="all" href="~/Content/css/library/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" media="all"href="~/Content/css/library/fontawesome.min.css">
        <link rel="stylesheet" type="text/css" media="all" href="~/Content/css/md-font.css">
        <link rel="stylesheet" type="text/css" media="all" href="~/Content/css/style.css">
        <script>
            window.load = function () {
                window.status = 'render-pdf';
            };
        </script>
        <style>
    
            CSS is above
        </style>
    
    </head>
    <body>
        <div id="frenteCert" class="frente container">
            <img src=@img_frente alt="imagem frente" />
            <div class="mainText text-justify" style="font-family:fonteMaior;">
                <span class="">
                    @ViewBag.nomeProfessor, confere a <b style="text-transform: uppercase;">@ViewBag.nomeAluno</b> o presente certificado, referente à sua participação no curso <b style="text-transform: uppercase;">@ViewBag.nomeCurso</b>,
                    concluído em @ViewBag.dataCertificado @*@ViewBag.dataConclusao*@ , com carga horária de @ViewBag.cargaHoraria horas.
                </span>
            </div>
            <div id="qrCode" class="qrcode">
                <img src="@ViewBag.QRCodeImage" alt="" style="height:150px;width:150px" />
            </div>
            <div id="dataEmissao" class="registro">
                <p style="font-size:24px; font-family:fonteMaior;">Curitiba, 21 de Maio de 2021.</p>
            </div>
            <div id="instrutor" class="instrutor">
                <div class="line"></div>
                <p class="text-center" style="text-align:center; font-size: 24px; font-family:fonteMaior;">INSTRUTOR</p>
            </div>
        </div>
        <div id="versoCert" class="verso container">
            <img src=@img_verso alt="imagem verso" />
            <div id="colunas" class="conteudos">
                @foreach (var item in ViewBag.conteudos)
                {
                    <p>@item.conteudo</p>
                }
            </div>
        </div>
    
    </body>
    </html>

控制器：这只是我调用 PDF 生成器的部分，它正在工作，但不知道如何更好地配置。

var viewPdf = new PartialViewAsPdf
{
    ViewName = "_GeraCertificado",
    RotativaOptions = { PageOrientation = Rotativa.Core.Options.Orientation.Landscape,
                        PageSize = Rotativa.Core.Options.Size.A4 },
    FileName = "certificado.pdf",
    Model = tbl_aluno_curso
};

if (isPdf != null && isPdf == true)
{
    return viewPdf;
}

这是 html

中当前输出的示例图像

Output in PDF - front

Output in PDF- back

Front

Back

Answer 1

我找到了一个解决方案，将 div 结构视为 parent/child，在证书的每个块上都有一个主容器，然后将它们与 relative/absolute 定位对齐。完整代码如下：

PS。我删除了无用的脚本，img 标签中 src 处的 viewbags 和 vars 只是 base64 字符串。我希望这可以帮助人们！

                   <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="~/Scripts/js/library/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="~/Scripts/js/library/bootstrap.min.js"></script>
        <script type="text/javascript" src="~/Scripts/js/library/jquery.appear.min.js"></script>
        <script type="text/javascript" src="~/Scripts/js/library/jquery.easing.min.js"></script>
        <link rel="stylesheet" type="text/css" media="all" href="~/Content/css/library/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" media="all" href="~/Content/css/library/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" media="all" href="~/Content/css/md-font.css">
        <link rel="stylesheet" type="text/css" media="all" href="~/Content/css/style.css">

        <style>
    
            @@font-face {
                font-family: fonteMaior;
                src: url("../../Content/fonts/DINNextLTPro-Condensed.otf")
            }
    
            * {
                -webkit-print-color-adjust: exact !important;
                page-break-inside: avoid !important;
            }
    
            html {
                margin: 0 0;
                padding: 0;
            }
    
            body {
                margin: 0 0;
                font-family: fonteMaior !important;
                font-size: 28px;
                color: #464646;
                padding: 0;
            }
    
            .line {
                height: 20px;
                border-bottom: 1px solid #D1D1D1 !important;
                position: center;
            }
    
            .container {
                position: relative;
                text-align: center;
            }
    
            .mainText {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
    
            .qrcode {
                position: absolute;
                bottom: 72px;
                left: 95px;
                border: 1px solid #D1D1D1 !important;
            }
    
            .registro {
                position: absolute;
                bottom: 120px;
                left: 265px;
            }
    
            .instrutor {
                position: absolute;
                bottom: 120px;
                left: 775px;
                width: 300px;
            }
    
            #assinatura {
                position: absolute;
                z-index: 99;
                bottom: 35px;
                left: 65px;
                max-width: 280px;
                max-height: 110px;
                width: auto !important;
                height: auto !important;
            }
    
            .frente {
                background-image: url( @img_frente ) !important;
                background-repeat: no-repeat !important;
                background-position: top !important;
                background-size: contain !important;
                display: block !important;
                width: 1170px !important;
                height: 825px !important;
            }
            .verso {
                background-image: url( @img_verso ) !important;
                background-repeat: no-repeat !important;
                background-position: top !important;
                background-size: contain !important;
                display: block !important;
                width: 1170px !important;
                height: 825px !important;
            }
    
            .conteudos {
                position: absolute;
                bottom: 140px;
                left: 135px;
                display: inline-flex;
                flex-flow: column wrap;
                align-content: flex-start;
                height: 530px;
    /*            border: 1px solid blue !important;*/
            }
            .listConteudos{
    
            }
            ul {
                list-style-type: none;
                display: contents;
                float: left;
                flex-flow: column wrap;
                align-content: flex-start;
            }
    
            
            @@media screen, print {
                html, body {
                    margin: 0;
                    padding: 0;
                    border: 0;
                    font-family: fonteMaior !important;
                    font-size:28px;
                }
                .certContainer{
    
                }
                #printable {
                    margin: 0;
                    padding: 0;
                    border: 0;
                    font-size: 14px;
                }
    
                img{
                    display:inline;
                }
                    #printable ~ * {
                        display: none;
                        -webkit-print-color-adjust: exact !important;
                        page-break-inside: avoid !important;
                    }
            }
        </style>
    </head>
    <body>
        <div id="frenteCert" class="frente container">
            @*<img src=@img_frente alt="imagem frente" />*@
            <div class="mainText text-justify" style="font-family:fonteMaior;">
                <span class="">
                    @ViewBag.nomeProfessor, confere a <b style="text-transform: uppercase;">@ViewBag.nomeAluno</b> o presente certificado, referente à sua participação no curso <b style="text-transform: uppercase;">@ViewBag.nomeCurso</b>,
                    concluído em @ViewBag.dataConclusao, com carga horária de @ViewBag.cargaHoraria horas.
                </span>
            </div>
            <div id="qrCode" class="qrcode">
                <img src="@ViewBag.QRCodeImage" alt="" style="height:150px;width:150px" />
            </div>
            <div id="dataEmissao" class="registro">
                @if (ViewBag.cidade != null && ViewBag.estado != null)
                {
                    <p style="font-size:24px; font-family:fonteMaior;">@ViewBag.cidade - @ViewBag.estado, @ViewBag.dataCertificado.</p>
                }
                else
                {
                    <p style="font-size:24px; font-family:fonteMaior;">CIDADE - UF, @ViewBag.dataCertificado.</p>
                }        </div>
            <div id="instrutor" class="instrutor">
                @if (ViewBag.assinatura != null)
                {
                    <img id="assinatura" src=@ViewBag.assinatura alt="" />
                }
                else
                {
                    <img id="assinatura" src=@signature alt="" style="height:75px;width:280px" />
                }
    
                <div class="line"></div>
                <p class="text-center" style="text-align:center; font-size: 24px; font-family:fonteMaior;">INSTRUTOR</p>
            </div>
        </div>
        <div id="versoCert" class="verso container" style="text-align:unset !important">
            @*<img src=@img_verso alt="imagem verso" />*@
            <div id="colunas" class="conteudos" style="width: 200px !important">
                <ul class="listConteudos">
                    @foreach (var item in ViewBag.conteudos)
                    {
                        <li style="font-family:fonteMaior; font-size: 18px !important; margin-right: 15px !important;">@item.conteudo</li>
                    }
                </ul>
            </div>
        </div>
    </body>
    </html>

将 HTML 中的图像打印为 bakgrounds 以 PDF 格式查看

Printing images as bakgrounds from HTML View in PDF

html

css

asp.net-mvc

razor