Skip to content

Instantly share code, notes, and snippets.

@AfipSDK

AfipSDK/bill_jinja.html

Last active April 14, 2025 18:44
Show Gist options
  • Save AfipSDK/9d724172eec0233eb9bef7ab58113ce0 to your computer and use it in GitHub Desktop.
Save AfipSDK/9d724172eec0233eb9bef7ab58113ce0 to your computer and use it in GitHub Desktop.
Download ZIP
Comprobantes de AFIP usando Jinja2
Raw
bill_jinja.html
<!DOCTYPE html>
<html>
<head>
<title>Factura</title>
<style type="text/css">
* {
box-sizing: border-box;
-webkit-user-select: none;
/* Chrome, Opera, Safari */
-moz-user-select: none;
/* Firefox 2+ */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Standard syntax */
}
.bill-container {
width: 750px;
position: absolute;
left: 0;
right: 0;
margin: auto;
border-collapse: collapse;
font-family: sans-serif;
font-size: 13px;
}
.bill-emitter-row td {
width: 50%;
border-bottom: 1px solid;
padding-top: 10px;
padding-left: 10px;
vertical-align: top;
}
.bill-emitter-row {
position: relative;
}
.bill-emitter-row td:nth-child(2) {
padding-left: 60px;
}
.bill-emitter-row td:nth-child(1) {
padding-right: 60px;
}
.bill-type {
border: 1px solid;
border-top: 1px solid;
border-bottom: 1px solid;
margin-right: -30px;
background: white;
width: 60px;
height: 50px;
position: absolute;
left: 0;
right: 0;
top: -1px;
margin: auto;
text-align: center;
font-size: 40px;
font-weight: 600;
}
.text-lg {
font-size: 30px;
}
.text-center {
text-align: center;
}
.col-2 {
width: 16.66666667%;
float: left;
}
.col-3 {
width: 25%;
float: left;
}
.col-4 {
width: 33.3333333%;
float: left;
}
.col-5 {
width: 41.66666667%;
float: left;
}
.col-6 {
width: 50%;
float: left;
}
.col-8 {
width: 66.66666667%;
float: left;
}
.col-10 {
width: 83.33333333%;
float: left;
}
.row {
overflow: hidden;
}
.margin-b-0 {
margin-bottom: 0px;
}
.bill-row td {
padding-top: 5px
}
.bill-row td>div {
border-top: 1px solid;
border-bottom: 1px solid;
margin: 0 -1px 0 -2px;
padding: 0 10px 13px 10px;
}
.row-details table {
border-collapse: collapse;
width: 100%;
}
.row-details td>div,
.row-qrcode td>div {
border: 0;
margin: 0 -1px 0 -2px;
padding: 0;
}
.row-details table td {
padding: 5px;
}
.row-details table tr:nth-child(1) {
border-top: 1px solid;
border-bottom: 1px solid;
background: #c0c0c0;
font-weight: bold;
text-align: center;
}
.row-details table tr+tr {
border-top: 1px solid #c0c0c0;
}
.text-right {
text-align: right;
}
.margin-b-10 {
margin-bottom: 10px;
}
.total-row td>div {
border-width: 2px;
}
.row-qrcode td {
padding: 10px;
}
#qrcode {
width: 50%
}
</style>
</head>
<body>
<table class="bill-container">
<tr class="bill-emitter-row">
<td>
<div class="bill-type">
{{ bill['type'] }}
</div>
<div class="text-lg text-center">
{{ business_data['business_name'] }}
</div>
<p><strong>Razón social:</strong> {{ business_data['business_name'] }}</p>
<p><strong>Domicilio Comercial:</strong> {{ business_data['address'] }}</p>
<p><strong>Condición Frente al IVA:</strong> {{ business_data['vat_condition'] }}</p>
</td>
<td>
<div>
<div class="text-lg">
Factura
</div>
<div class="row">
<p class="col-6 margin-b-0">
<strong>Punto de Venta: {{ bill['point_of_sale'] }}</strong>
</p>
<p class="col-6 margin-b-0">
<strong>Comp. Nro: {{ bill['number'] }} </strong>
</p>
</div>
<p><strong>Fecha de Emisión:</strong> {{ bill['date'] }}</p>
<p><strong>CUIT:</strong> {{ business_data['tax_id'] }}</p>
<p><strong>Ingresos Brutos:</strong> {{ business_data['gross_income_id'] }}</p>
<p><strong>Fecha de Inicio de Actividades:</strong> {{ business_data['start_date'] }}</p>
</div>
</td>
</tr>
<tr class="bill-row">
<td colspan="2">
<div class="row">
<p class="col-4 margin-b-0">
<strong>Período Facturado Desde: </strong>{{ bill['since'] }}
</p>
<p class="col-3 margin-b-0">
<strong>Hasta: </strong>{{ bill['until'] }}
</p>
<p class="col-5 margin-b-0">
<strong>Fecha de Vto. para el pago: </strong>{{ bill['expiration'] }}
</p>
</div>
</td>
</tr>
<tr class="bill-row">
<td colspan="2">
<div>
<div class="row">
<p class="col-4 margin-b-0">
<strong>CUIL/CUIT: </strong>{{ billing_data['tax_id'] }}
</p>
<p class="col-8 margin-b-0">
<strong>Apellido y Nombre / Razón social: </strong>{{ billing_data['name'] }}
</p>
</div>
<div class="row">
<p class="col-6 margin-b-0">
<strong>Condición Frente al IVA: </strong>{{ billing_data['vat_condition'] }}
</p>
<p class="col-6 margin-b-0">
<strong>Domicilio: </strong>{{ billing_data['address'] }}
</p>
</div>
<p>
<strong>Condicion de venta: </strong>{{ billing_data['payment_method'] }}
</p>
</div>
</td>
</tr>
<tr class="bill-row row-details">
<td colspan="2">
<div>
<table>
<tr>
<td>Código</td>
<td>Producto / Servicio</td>
<td>Cantidad</td>
<td>U. Medida</td>
<td>Precio Unit.</td>
<td>% Bonif.</td>
<td>Imp. Bonif.</td>
<td>Subtotal</td>
</tr>
{% for item in items %}
<tr>
<td>{{ item['code'] }}</td>
<td>{{ item['name'] }}</td>
<td>{{ item['quantity'] }}</td>
<td>{{ item['measurement_unit'] }}</td>
<td>{{ item['price'] }}</td>
<td>{{ item['percent_subsidized'] }}</td>
<td>{{ item['impost_subsidized'] }}</td>
<td>{{ item['subtotal'] }}</td>
</tr>
{% endfor %}
</table>
</div>
</td>
</tr>
<tr class="bill-row total-row">
<td colspan="2">
<div>
<div class="row text-right">
<p class="col-10 margin-b-0">
<strong>Subtotal: $</strong>
</p>
<p class="col-2 margin-b-0">
<strong>{{ overall['subtotal'] }}</strong>
</p>
</div>
<div class="row text-right">
<p class="col-10 margin-b-0">
<strong>Importe Otros Tributos: $</strong>
</p>
<p class="col-2 margin-b-0">
<strong>{{ overall['impost_tax'] }}</strong>
</p>
</div>
<div class="row text-right">
<p class="col-10 margin-b-0">
<strong>Importe total: $</strong>
</p>
<p class="col-2 margin-b-0">
<strong>{{ overall['total'] }}</strong>
</p>
</div>
</div>
</td>
</tr>
<tr class="bill-row row-details">
<td>
<div>
<div class="row">
<img id="qrcode" src="{{ qr_code_image }}">
</div>
</div>
</td>
<td>
<div>
<div class="row text-right margin-b-10">
<strong>CAE Nº:&nbsp;</strong> {{ bill['CAE'] }}
</div>
<div class="row text-right">
<strong>Fecha de Vto. de CAE:&nbsp;</strong> {{ bill['CAE_expiration'] }}
</div>
</div>
</td>
</tr>
<tr class="bill-row row-details">
<td colspan="2">
<div>
<div class="row text-center margin-b-10">
<span class="vertical-align:bottom">Generado con Afip SDK</span>
<img style="height: 20px;vertical-align: middle;" src="https://afipsdk.com/faviconx32.png" alt="📦" />
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Raw
ticket_jinja.html
<!DOCTYPE html>
<html>
<head>
<title>Ticket</title>
<style type="text/css">
*{
box-sizing: border-box;
-webkit-user-select: none; /* Chrome, Opera, Safari */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
}
.bill-container{
border-collapse: collapse;
max-width: 8cm;
position: absolute;
left:0;
right: 0;
margin: auto;
border-collapse: collapse;
font-family: monospace;
font-size: 12px;
}
.text-lg{
font-size: 20px;
}
.text-center{
text-align: center;
}
#qrcode {
width: 75%
}
p {
margin: 2px 0;
}
table table {
width: 100%;
}
table table tr td:last-child{
text-align: right;
}
.border-top {
border-top: 1px dashed;
}
.padding-b-3 {
padding-bottom: 3px;
}
.padding-t-3 {
padding-top: 3px;
}
</style>
</head>
<body>
<table class="bill-container">
<tr>
<td class="padding-b-3">
<p>Razón social: {{ business_data['business_name'] }}</p>
<p>Direccion: {{ business_data['address'] }}</p>
<p>C.U.I.T.: {{ business_data['tax_id'] }}</p>
<p>{{ business_data['vat_condition'] }}</p>
<p>IIBB: {{ business_data['gross_income_id'] }}</p>
<p>Inicio de actividad: {{ business_data['start_date'] }}</p>
</td>
</tr>
<tr>
<td class="border-top padding-t-3 padding-b-3">
<p class="text-center text-lg">FACTURA {{ bill['type'] }}</p>
<p class="text-center">Codigo {{ bill['code'] }}</p>
<p>P.V: {{ bill['point_of_sale'] }}</p>
<p>Nro: {{ bill['number'] }}</p>
<p>Fecha: {{ bill['date'] }}</p>
<p>Concepto: {{ bill['concept'] }}</p>
</td>
</tr>
<tr>
<td class="border-top padding-t-3 padding-b-3">
<p>A {{ billing_data['vat_condition'] }}</p>
</td>
</tr>
<tr>
<td class="border-top padding-t-3 padding-b-3">
<div>
<table>
{% for item in items %}
<tr>
<td>{{ item['quantity'] }}</td>
<td>{{ item['name'] }}</td>
<td>{{ item['tax_percent'] }}</td>
<td>{{ item['price'] }}</td>
</tr>
{% endfor %}
</table>
</div>
</td>
</tr>
<tr>
<td class="border-top padding-t-3 padding-b-3">
<div>
<table>
<tr>
<td>TOTAL</td>
<td>{{ overall['total'] }}</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="border-top padding-t-3">
<p>CAE: {{ bill['CAE'] }}</p>
<p>Vto: {{ bill['CAE_expiration'] }}</p>
</td>
</tr>
<tr class="text-center">
<td>
<img id="qrcode" src="{{ qr_code_image }}">
</td>
</tr>
<tr class="bill-row row-details">
<td style="margin-bottom: 10px; text-align: center;">
<span class="vertical-align:bottom">Generado con Afip SDK</span>
<img style="height:20px;vertical-align: middle;" src="https://afipsdk.com/faviconx32.png" alt="📦" />
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment