ERPNext Foundation ERPNext Cloud User Manual Blog Discuss Frappé* Donate

Load a Javascript in /print


#1

I have successfully created a print format for printing barcodes.
But it uses JsBarcode (https://github.com/lindell/JsBarcode).
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.


How to Print Barcode Labels
#2

Share your code!


#3

Sure thing!

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:

<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>
<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>

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:

/print Issue:


Print Barcode labels
#4

The only issue is adding the JsBarcode script to /print. I can add it to the Item Doctype using Custom Script option.


#5

Hi @Sagar_Vora,

try using @print in your css.


#6

Its a JS issue.


#7

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.


#8

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]


#9

@Sagar_Vora Great. Look forward to your pull-request

CC @IAGAdmin @RobertSchouten


#10

@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


#11

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.


#12

@rmehta
@snv

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


#13

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.


#15

Success a screenshot! How to print barcode label


#16

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.


#17

My bad thanks for clarifying - I am misleading and mischievous but not deliberately :slight_smile: