1

我试图在用比萨生成的 pdf 中设置背景颜色。我已经看到了这个帖子相关的问题并尝试实现它们，但背景只显示在 pdf 的一部分中。这是我的代码：

{% load app_filters %}
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ficha Técnica</title>
		<style type="text/css">
		 @page {
				size: {{ pagesize|default:"A4" }};
				margin-left: 2.5cm;
				margin-right: 2.5cm;
				margin-top: 2cm;
				margin-bottom: 2cm;
				background-image: url('{{ STATIC_URL }}pdf/fondo.png');
				

				@frame header {
					-pdf-frame-content: page-header;
					margin-top: 0.7cm;
					margin-right: 2mm;
					margin-bottom: 0cm;
					margin-left: 1.2cm;
				}

				@frame footer {
					-pdf-frame-content: page-footer;
					bottom: 0cm;
					margin-left: 1cm;
					margin-right: 1cm;
					height: 1cm;
				}


			}

		@font-face {
			font-family: "light";
			src: url('{{ STATIC_URL }}fonts/yanonekaffeesatz-light-webfont.ttf');
			font-weight: normal;
			font-style: normal;
		}
		@font-face {
			font-family: "bold";
			src: url('{{ STATIC_URL }}fonts/yanonekaffeesatz-bold-webfont.ttf');
			font-weight: normal;
			font-style: normal;
		}
		.logo{
			margin-bottom: 50px;
		}
		.general img{
			width: 400px;
			margin-bottom: 50px;
		}
		.titulo{
			font-family: "bold";
			font-size: 22px;
			text-transform: uppercase;
			color:#808080;
			margin-bottom: 15px;
			letter-spacing: "1";
		}
		.general p{
			font-family: "light";
			font-size: 13px;
			color:#808080;

		}
		.line{
			width:200pt; 
			border-top: 2px solid #808080;
			color:white;
			font-size: 1px;
		}
		.bases
		{
			font-family: "bold";
			font-size: 12px;
			color:#808080;
		}
		.bases table {-pdf-keep-in-frame-mode: shrink;}
		.bases img{
			width:85px;
		}
		table{text-align: center;}
		</style>
	</head>
<body>
	<div class="content">
		<div class="logo">
			<center><img src='{{ STATIC_URL }}pdf/logo_pdf.png'></center>
		</div>
		<div class="general">
			<center><img src="{{MEDIA_URL}}{{Proto.image}}" alt=""></center>
			<h1 class='titulo'>{{Proto.name|upper}}</h1>
			<p>{{Proto.description}}</p>
		</div>
		<div class='line'>.</div>
		<div class="bases">
			<h1 class='titulo'>BASES SELECCIONADAS</h1>
			<center>
				<table>
					<tr>
					{%for detalle in ProtoDetalle%}
					<td>
						<center><img src="{{MEDIA_URL}}{{detalle.base.especificImage}}" alt=""></center>
						<br>
						<h2>{{detalle.base.name|upper}}</h2>
						<h2>{{detalle.tela.name|upper}}</h2>
						<table>
							<tr>
								<td style='width:100px;'></td>
								<td><h2>{{detalle.color.name|split_by:"-"}}</h2></td>
								<td style='background-color:{{detalle.color.color}}; color:{{detalle.color.color}}; width:50px; font-size: 5px; border: 1px solid black;'>.</td>
								<td style='width:100px;'></td>
							</tr>
						</table>
					</td>
					{%endfor%}
					</tr>
				</table>
			</center>
		</div>
	</div>
</body>
</html>

背景图像只是一个 36 像素 x 36 像素的彩色正方形。

我试图将背景颜色设置为 body,html,div 但只有带有内容的 div 才会采用颜色。所以我不明白为什么 background-image 属性只设置在显示的 pdf 的一部分中。

知道我的错误是什么吗？

这是当前的结果：

在此处输入图像描述

4

2 回答 2

0

我解决了制作与 A4 页面（297 x 210 毫米）相同大小的背景图像。现在背景覆盖了所有的pdf。

于 2014-11-06T03:06:11.153 回答
0

它似乎正在使用 pdf 背景，我建议这样做。请注意，（轻量级）文档仅提及 pdf 背景。 https://xhtml2pdf-base.googlecode.com/hg/doc/xhtml2pdf-en.html

于 2015-12-16T21:56:29.900 回答