比萨html2pdf背景图像不能正常工作
问题描述:
我试图用比萨生成的pdf设置背景色。我已经看到这篇文章related question并尝试实现它们,但背景仅显示在pdf的一部分中。这是我的代码:比萨html2pdf背景图像不能正常工作
{% load app_filters %}
<html>
\t <head>
\t \t <meta charset="UTF-8">
\t \t <title>Ficha Técnica</title>
\t \t <style type="text/css">
\t \t @page {
\t \t \t \t size: {{ pagesize|default:"A4" }};
\t \t \t \t margin-left: 2.5cm;
\t \t \t \t margin-right: 2.5cm;
\t \t \t \t margin-top: 2cm;
\t \t \t \t margin-bottom: 2cm;
\t \t \t \t background-image: url('{{ STATIC_URL }}pdf/fondo.png');
\t \t \t \t
\t \t \t \t @frame header {
\t \t \t \t \t -pdf-frame-content: page-header;
\t \t \t \t \t margin-top: 0.7cm;
\t \t \t \t \t margin-right: 2mm;
\t \t \t \t \t margin-bottom: 0cm;
\t \t \t \t \t margin-left: 1.2cm;
\t \t \t \t }
\t \t \t \t @frame footer {
\t \t \t \t \t -pdf-frame-content: page-footer;
\t \t \t \t \t bottom: 0cm;
\t \t \t \t \t margin-left: 1cm;
\t \t \t \t \t margin-right: 1cm;
\t \t \t \t \t height: 1cm;
\t \t \t \t }
\t \t \t }
\t \t @font-face {
\t \t \t font-family: "light";
\t \t \t src: url('{{ STATIC_URL }}fonts/yanonekaffeesatz-light-webfont.ttf');
\t \t \t font-weight: normal;
\t \t \t font-style: normal;
\t \t }
\t \t @font-face {
\t \t \t font-family: "bold";
\t \t \t src: url('{{ STATIC_URL }}fonts/yanonekaffeesatz-bold-webfont.ttf');
\t \t \t font-weight: normal;
\t \t \t font-style: normal;
\t \t }
\t \t .logo{
\t \t \t margin-bottom: 50px;
\t \t }
\t \t .general img{
\t \t \t width: 400px;
\t \t \t margin-bottom: 50px;
\t \t }
\t \t .titulo{
\t \t \t font-family: "bold";
\t \t \t font-size: 22px;
\t \t \t text-transform: uppercase;
\t \t \t color:#808080;
\t \t \t margin-bottom: 15px;
\t \t \t letter-spacing: "1";
\t \t }
\t \t .general p{
\t \t \t font-family: "light";
\t \t \t font-size: 13px;
\t \t \t color:#808080;
\t \t }
\t \t .line{
\t \t \t width:200pt;
\t \t \t border-top: 2px solid #808080;
\t \t \t color:white;
\t \t \t font-size: 1px;
\t \t }
\t \t .bases
\t \t {
\t \t \t font-family: "bold";
\t \t \t font-size: 12px;
\t \t \t color:#808080;
\t \t }
\t \t .bases table {-pdf-keep-in-frame-mode: shrink;}
\t \t .bases img{
\t \t \t width:85px;
\t \t }
\t \t table{text-align: center;}
\t \t </style>
\t </head>
<body>
\t <div class="content">
\t \t <div class="logo">
\t \t \t <center><img src='{{ STATIC_URL }}pdf/logo_pdf.png'></center>
\t \t </div>
\t \t <div class="general">
\t \t \t <center><img src="{{MEDIA_URL}}{{Proto.image}}" alt=""></center>
\t \t \t <h1 class='titulo'>{{Proto.name|upper}}</h1>
\t \t \t <p>{{Proto.description}}</p>
\t \t </div>
\t \t <div class='line'>.</div>
\t \t <div class="bases">
\t \t \t <h1 class='titulo'>BASES SELECCIONADAS</h1>
\t \t \t <center>
\t \t \t \t <table>
\t \t \t \t \t <tr>
\t \t \t \t \t {%for detalle in ProtoDetalle%}
\t \t \t \t \t <td>
\t \t \t \t \t \t <center><img src="{{MEDIA_URL}}{{detalle.base.especificImage}}" alt=""></center>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <h2>{{detalle.base.name|upper}}</h2>
\t \t \t \t \t \t <h2>{{detalle.tela.name|upper}}</h2>
\t \t \t \t \t \t <table>
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td style='width:100px;'></td>
\t \t \t \t \t \t \t \t <td><h2>{{detalle.color.name|split_by:"-"}}</h2></td>
\t \t \t \t \t \t \t \t <td style='background-color:{{detalle.color.color}}; color:{{detalle.color.color}}; width:50px; font-size: 5px; border: 1px solid black;'>.</td>
\t \t \t \t \t \t \t \t <td style='width:100px;'></td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t </table>
\t \t \t \t \t </td>
\t \t \t \t \t {%endfor%}
\t \t \t \t \t </tr>
\t \t \t \t </table>
\t \t \t </center>
\t \t </div>
\t </div>
</body>
</html>
背景图像是仅仅通过36px色块36px。
我试图设置为body,html,div的背景颜色,但只有div的内容采取颜色。所以我不明白为什么背景图像属性只设置在显示的pdf的porcent。
任何想法我的错误是什么?
这是当前结果:
答
我解决使背景图像与A4纸(297 X210毫米)的大小相同。现在背景涵盖了所有的pdf。
答
它似乎与PDF背景,我建议。 请注意,(轻量级)文档仅提及pdf背景。 https://xhtml2pdf-base.googlecode.com/hg/doc/xhtml2pdf-en.html