如何解决样式和背景图像不适用于 Django 中的 pdf 生成器
我正在尝试生成带有样式和背景图像的发票。
我正在使用 xhtml2pdf 库来生成它。我在 body 部分写了所有的样式。但不幸的是，原始视图不起作用。我按照 this tutorial 生成 pdf。
这是我的原始invoice.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Document</title>
<style>
.backgroundImage {
position: absolute;
opacity: 20%;
top: 15%;
left: 10%;
}
img {
height: 80vh;
}
.logo {
height: 70px;
width: 70px;
object-fit: contain;
}
.header_text {
font-weight: bold;
}
.text_bg {
background-color: #13465cfb;
color: white;
padding-left: 10px;
}
.finish {
font-weight: bold;
font-size: 1.3rem;
color: rgba(255,168,7,0.87);
}
.com_name {
font-size: 1.5rem;
}
.resize {
font-size: 0.8rem;
}
.sign {
height: 10px;
width: 150px;
border-bottom: 1px solid black;
}
.t_name {
font-size: 1.1rem;
font-weight: bolder;
}
/* bootsrap edit */
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.p-5 {
padding: 3rem !important;
}
.mb-5,.my-5 {
margin-bottom: 3rem !important;
}
.mt-5,.my-5 {
margin-top: 3rem !important;
}
.mt-4,.my-4 {
margin-top: 1.5rem !important;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.align-items-center {
align-items: center !important;
}
.justify-content-center {
justify-content: center !important;
}
.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.col-lg-1 {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-lg-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-lg-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%;
}
.logo {
height: 70px;
width: 70px;
object-fit: contain;
}
img {
vertical-align: middle;
border-style: none;
}
.text-right {
text-align: right !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.h5,h5 {
font-size: 1.25rem;
}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
.mt-2,.my-2 {
margin-top: 0.5rem !important;
}
.resize {
font-size: 0.8rem;
}
.col-lg-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-lg-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-lg-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-lg-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-lg-12 {
flex: 0 0 100%;
max-width: 100%;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.text-center {
text-align: center !important;
}
.table {
width: 100%;
margin-bottom: 1rem;
color: #212529;
border-collapse: collapse;
}
body {
background-image: url(assets/img/logo-update.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
/* .watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 25%;
left: 25%;
background-image: url(assets/img/logo-update.png);
background-repeat: no-repeat;
opacity: 0.2;
} */
/* table */
#customers {
font-family: Arial,Helvetica,sans-serif;
border-collapse: collapse;
width: 100%;
margin-bottom: 30px;
}
#customers td,#customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #13465cfb;
color: white;
}
</style>
</head>
<body>
<div class="container-fluid " id="test">
<div class="p-5 mt-5 mb-5 watermarked" style="width: 95vw">
<div class="row justify-content-center align-items-center">
<div class="col-1 col-lg-1">
<img src="https://www.kmcargo.com.my/wp-content/uploads/2021/05/logo-removebg.png" class="logo">
</div>
<div class="col-7 col-lg-7">
<div class="com_name">Company Name</div>
</div>
<div class="col-4 col-lg-4 text-right">
<div class="h5 text-uppercase">invoice</div>
</div>
</div>
<div class="row mt-2 resize">
<div class="col-6 col-lg-6">
<div class="text">
<div>[Street Address]</div>
<div>[City,State,ZIP Code]</div>
<div>[Phone]</div>
<div>[Email Address]</div>
<div>[Company Website]</div>
</div>
</div>
<div class="col-6 col-lg-6">
<div class="row">
<div class="col-12 col-lg-10 header_text text-right">Date</div>
<div class="col-12 col-lg-2">2021-06-29</div>
</div>
<div class="row">
<div class="col-10 col-lg-10 header_text text-right">Invoice</div>
<div class="col-12 col-lg-2">[######]</div>
</div>
<div class="row">
<div class="col-10 col-lg-10 header_text text-right">
Due Date
</div>
<div class="col-12 col-lg-2">2021-07-01</div>
</div>
</div>
</div>
<div class="row mt-4 resize">
<div class="col-5 col-lg-5">
<div class="text_bg text-uppercase" style="margin-bottom: 0.5rem">
bill to
</div>
<div>[Receipent Name]</div>
<div>[Company Name]</div>
<div>[Street Address]</div>
<div>[City,zIP Code]</div>
<div>[Phone]</div>
</div>
<div class="col-2 col-lg-2"></div>
<div class="col-5 col-lg-5">
<div class="text_bg text-uppercase" style="margin-bottom: 0.5rem">
ship to
</div>
<div>[Receipent Name]</div>
<div>[Company Name]</div>
<div>[Street Address]</div>
<div>[City,zIP Code]</div>
<div>[Phone]</div>
</div>
</div>
<div class="col-12 col-lg-12 table-responsive mt-4 resize">
<table id="customers">
<tr>
<th>Description</th>
<th>Qty</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
<tr>
<td>Product 1</td>
<td>2</td>
<td>$50.00</td>
<td>$100.00</td>
</tr>
<tr>
<td>Product 2</td>
<td>4</td>
<td>$60.00</td>
<td>$240.00</td>
</tr>
<tr>
<td>Labor</td>
<td>14</td>
<td>$60.00</td>
<td>$840.00</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<thead class="text_bg">
<tr style="padding-top: 10px; padding-bottom: 10px">
<th class="text-left th-sm">Description</th>
<th class="th-sm">Qty</th>
<th class="th-sm">Unit Price</th>
<th class="th-sm">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>2</td>
<td>$50.00</td>
<td>$100.00</td>
</tr>
<tr>
<td>Product 2</td>
<td>4</td>
<td>$60.00</td>
<td>$240.00</td>
</tr>
<tr>
<td>Labor</td>
<td>14</td>
<td>$60.00</td>
<td>$840.00</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table> -->
</div>
<div class="row">
<div class="col-5 col-lg-5">
<div class="card resize">
<div class="text_bg header_text">Comments</div>
<div class="pl-2 pb-3 pt-1">
<div>1. Payment due in 30 days</div>
<div>
2. Please note the invoice number in your payment method
</div>
<div class="mt-2">
Banking and wire transfer information also be included here
</div>
</div>
</div>
<div class="sign mt-4"></div>
<div class="resize pl-5 header_text">Signature</div>
</div>
<div class="col-4 col-lg-4"></div>
<div class="col-3 col-lg-3">
<div class="d-flex flex-column resize">
<div class="row">
<div class="col-6 col-lg-6 text-right">Subtotal</div>
<div class="col-6 col-lg-6 text-left">$1,180.00</div>
</div>
<div class="row">
<div class="col-6 col-lg-6 text-right">Discounts</div>
<div class="col-6 col-lg-6 text-left">$177.00</div>
</div>
<div class="row">
<div class="col-6 col-lg-6 text-right">Taxes</div>
<div class="col-6 col-lg-6 text-left">$100.30</div>
</div>
<div class="row">
<div class="col-6 col-lg-6 text-right t_name">Total</div>
<div class="col-6 col-lg-6 text-left t_name">$1,163.30</div>
</div>
<div class="finish mt-2 text-center">
Thank you for your business!
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我怎样才能获得像 
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
