I have successfully created a print format for printing barcodes.
But it uses JsBarcode (GitHub - lindell/JsBarcode: Barcode generation library written in JavaScript that works in both the browser and on Node.js).
I need to be able to load this script when the print is being taken.
If there is a way to include this script globally, that would be great.
2 Likes
Share your code!
Update: this is now a functioning example with issue fixed
Auto generating barcode:
import random
def validate_barcode(self):
if self.barcode:
if self.barcode == "auto":
existing = frappe.db.sql_list("select barcode from tabItem")
self.barcode = random.choice([item for item in map(str, range(1000,10000)) if item not in existing])
..
Customize Form Item:
New Print Format HTML:
<table class="custom">
<tr>
<td class="papa">
<p class="text-center" style="font-weight:bold; margin-bottom:4px;">
Siddhagiri's Satvyk<sup>TM</sup>
</p>
<p style="font-size:8pt;">{{ doc.item_name }}</p>
<svg class="barcode"></svg>
<p style="font-weight:bold;">MRP Rs. {{ doc.standard_rate }}</p>
<p id="pkd-date" style="font-size:7pt;">Pkd. Date: {{ doc.packed_date }}</p>
<p id="best-before" style="font-size:7pt;">Best before: {{ doc.best_before }}</p>
</td>
</tr>
</table>
<script src="https://cdn.jsdelivr.net/jsbarcode/3.5.1/JsBarcode.all.min.js"></script>
<script type="text/javascript">
if ( {{ doc.barcode }} > 1000000000000 ) {
JsBarcode(".barcode", "{{ doc.barcode }}", {
format: "EAN13",
height: 35,
fontSize: 12,
textAlign: "left",
lineColor: "#36414c",
width: 1,
margin: 0
});
}
if ( {{ doc.barcode }} <= 1000000000000 && {{ doc.barcode }} > 100000000000 ) {
JsBarcode(".barcode", "{{ doc.barcode }}", {
format: "UPC",
height: 35,
fontSize: 12,
textAlign: "left",
lineColor: "#36414c",
width: 1,
margin: 0
});
}
if ( {{ doc.barcode }} <= 100000000000 ) {
JsBarcode(".barcode", "{{ doc.barcode }}", {
height: 35,
fontSize: 12,
textAlign: "left",
lineColor: "#36414c",
width: 2,
displayValue: false,
margin: 0
});
}
if ('{{ doc.packed_date }}' == 'None'){
$('#pkd-date').hide();
}
if ('{{ doc.best_before }}' == 'None'){
$('#best-before').hide();
}
$('.papa').clone().insertAfter('.papa');
</script>
New Print Format CSS:
.print-format table, .print-format tr,
.print-format td, .print-format div, .print-format p {
vertical-align: middle;
}
@media screen {
.print-format {
width: 104mm;
min-height: 40mm;
height: 40mm;
padding: 0;
}
}
.custom {
width:100%;
border:none;
}
.custom td {
width : 50%;
height : 40mm;
padding : 2mm !important;
}
p sup{
opacity: 0.7;
}
.print-format p {
margin: 0px;
}
EDIT: End Result
Preview:
3 Likes
The only issue is adding the JsBarcode script to /print. I can add it to the Item Doctype using Custom Script option.
Hi @Sagar_Vora,
try using @print in your css.
Its a JS issue.
Shifting scripts at the end of the HTML fixed it. Thanks a lot!
PS: I’m considering creating a barcode app using the frappé framework after I finish my current assignment.
4 Likes
Thats awesome [quote=“Sagar_Vora, post:7, topic:16518, full:true”]
PS: I’m considering creating a barcode app using the frappé framework after I finish my current assignment
[/quote]
1 Like
@Sagar_Vora
nice even using the same jsBarcode as planned in
im curious as to the reason to force the barcode encoding form code-128 to
ean13 and upc?
if ure interested in helping out with the planned development would b great
I am very much interested. I have less experience though.
So, there are some barcodes which are being auto generated for internal use. They are 4 digits and we use code128 for the same. For products which have UPC or EAN13 we use that instead. I think a config page would be good so each business can set these things as per their requirements.
Please i need help with integrating jsBarcode. I am having serious issues with printing barcode and will really need a way out on this.
Will appreciate any help on this
Looks Good. We used the same concept for barcode printing.
But I have a question.
I tried printing the Pos receipt number using the JSbarcode and as the pos print is JS side print.
I cannot access the the jsbarcode file from js side print. Example this file > /assets/frappe/js/lib/JsBarcode.all.min.js
Edit:
We got it pulled in the pos js local storage. So JSBarcode file stays in the localstorage.
Using this we are able to make the offline_pos_name as receipt number which will be printed as a barcode at the bottom of the pos receipt.
Will attached screenshot later.
This is barcode label, Server Side custom print format.
The one I am talking about is JS Custom Print format used in POS Side.
Kindly find it below.
Just to tell you this is from offline pos side. coz online pos barcode generation can be dones easily from server side print format.
My bad thanks for clarifying - I am misleading and mischievous but not deliberately 
1 Like
I am facing the same issue. I have base64 encoded images and when I press print it shows the images in the print preview. when i go to print or pdf then the images dissapear, the statis html stays. I am using Jinja Print Format where it pulls the pictures from a doctype filed that is an base64 encoded image.
I need help here
I have the same issue. How to print barcode in offline pos print format
