小贝子编程

以PDF格式从HTML视图中将图像打印为bakgrounds



我很难打印一个简单的证书模板，我目前的问题是：

  1. 我需要设置两个图像作为背景，首页和封底。目前，我通过标记使用一些css定位来设置它们。

  2. 当我设置所有布局时，它们在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 中当前输出的示例图像

PDF格式输出-正面

PDF格式的输出-返回

前部

背面

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

PS。我删除了无用的脚本，img标记和vars中src处的viewbags只是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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium