How to Print Barcode Labels

1

I need help on how to print barcode labels.

I have designed a print format that contains just the product name and barcode

The barcode is contained in an html script that converts the barcode number to barcode symbols.

Works well and prints out the barcode as wanted.

Unfortunately the only barcode font that works for me is “Libre Barcode”, this font is not scanable by all barcode scanners.

So though it prints, it is not scanning, basically useless.

I would appreciate any idea on a way forward.

Regards

6 Likes
2

@olamide_shodunke if you think in use an printer label, print node can help you

1 Like
3

Thanks Max

have you used it to print barcode label before?

Regards

4

@olamide_shodunke using Zebra printers yes!

5

how to use this API

6

@max_morais_dmm

I am currently trying to setup one for a while now with no luck. Please would be kind enough to share your custom script for the barcode thing itself. Several test i have done seem not to be scanning.

Regards

7

dear anyone has an update on this

8

Just throwing it out there.

I made something like this and added to the Item dashboard section. It uses the same JS library that frappe uses, lindell/JsBarcode to render EAN13 barcodes. To download the label, I used tsayen/dom-to-image. So apparently, generating images won’t work on Safari or IE.

barcode_label

I also added a menu item to generate valid EAN13 barcodes by hashing the item_code. I hope I’m not breaking any laws generating pseudo random EAN13 codes.

barcode_gen_menu!

4 Likes
9

Looks good @sunhoww

Would you mind giving us a step by step on this ?

Especially on how you created the menu item to generate Valid EAN13 barcodes

Regards

1 Like
10

This is excellent. You captured all relevant information in the print format. Thank you.

11

To render the label,

  • I created an HTML template along with some CSS styles in the same repo
  • Fetch barcode data from a whitelisted python method

Everything else is pretty much here

1 Like
12

Another older barcode related thread

13

hi… @sunhoww
This is perfect solution for barcode…
please provide Instructions to run this script…

14

You might want to refer to https://erpnext.com/docs/user/manual/en/customize-erpnext/custom-scripts to know more about how custom scripts are run.

15

Thanks for reply…
Finally i did…

image
image1312×436 16.5 KB

2 Likes
16

This is for new user in erpnext how to generate barcode and print it…
Using JsBarcode
→ write below code to custom script ( Settings → Custome script)

image
image1191×639 42.7 KB

→ create Print Format (write HTML and css in print format)

image
image1154×652 32.1 KB

3 Likes
17

Hi all
The barcode looks great
I have a query
How do i generate a valid Barcode
Does a bar code scanner scan both Ean and Upc-a in India or is there any specific for the country
anybody can provide a step by step help to implement it
the above code shown is in a image format, cant copy that code
Please help
Regards
Krishnan Hemanth

18

would you please share the text for those, as we are all here new users…

I can manage to write it, but it might not work if i forget a brace or a semicolon…

also what is after else in the first photo??

Thanks

19

Hi @michaeleino @krishnanhemanth plz find below code for barcode generate…that i share in image!!, now i m trying to another way generate barcode once it complete i will share… Thank u…:grinning:

Settings → Custom Script → Item-Client

frappe.ui.form.on('Item','validate',  function(frm) {
	        var cur_doc = frm.doc;
            frappe.model.set_value(cur_doc.doctype, cur_doc.name, "custom_bar_code", cur_doc.item_code);
            if (cur_doc.custom_barcode_gener === 0) {
                if(cur_doc.custom_bar_code){
                    $(frm.fields_dict['custom_barcode_image'].wrapper).html('<svg id="code128"></svg>');
                    $.getScript("/assets/frappe/js/lib/JsBarcode.all.min.js", function( data, textStatus, jqxhr ) {
                    JsBarcode("#code128", cur_doc.custom_bar_code, {
                          height: 40,
                          width: 2,
                          fontSize: 11,
                          flat: true,
                          background: "#FFFFFF"
                    });
                    var svg = $('#code128').parent().html();
                    frappe.model.set_value(cur_doc.doctype, cur_doc.name, "custom_barcode_svg", svg);
                    frappe.model.set_value(cur_doc.doctype, cur_doc.name, "custom_barcode_gener", 1);
                    cur_frm.save();
                });
                } else 
                {
                    frappe.msgprint(__("Eles Please enter Barcode to to be printed"));
                }
            } 
})

Create Custom field → Settings → Customize Form

image
image1184×438 21.8 KB

image
image692×492 8.59 KB

Create Print Format → Settings → Print Format → New Print format
HTML

<div class="dashboard-section">
  <div class="barcode-label-container">
    <div id="barcode-label" class="barcode-label">
      <div class="barcode-header">RS Super Market</div>
      <div class="barcode-text">
        <span class="barcode-strong">{{ doc.item_name }}</span>
      </div>
      <div class="barcode-area">{{ doc.custom_barcode_svg }}</div>
      <div class="barcode-foot barcode-strong barcode-rotated">
       Sh.{{ doc.standard_rate }}
      </div>
    </div>
  </div>
</div>

CSS

.dashboard-section {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
}
.dashboard-section > button {
  margin-left: 10px;
}
.barcode-label-container {
  border: 1px solid #d1d8dd;
  width: fit-content;
  overflow: hidden;
}
.barcode-label {
  background-color: #ffffff;
  color: #000000;
  box-sizing: border-box;
  height: 34mm;
  width: 64mm;
  padding: 1.5mm;
  display: grid;
  grid-template-columns: 1fr 6mm;
  grid-template-rows: 4mm 1fr 17.5mm;
  grid-template-areas: 'header footer' 'text footer' 'barcode footer';
  font-family: monospace;
  font-size: 8pt;
  line-height: 1.2;
  text-align: center;
}
.barcode-rotated {
  line-height: 6mm;
  transform: translate(calc(-12.5mm), 0) rotate(-90deg);
  transform-origin: center center;
  height: 6mm;
  width: calc(31mm);
}
.barcode-header {
  grid-area: header;
  text-transform: uppercase;
}
.barcode-text {
  grid-area: text;
  height: calc(28.8pt);
  overflow-y: hidden;
  align-self: center;
}
.barcode-area {
  grid-area: barcode;
  align-self: center;
}
.barcode-foot {
  grid-area: footer;
  font-size: 1.4em;
  align-self: center;
}
.barcode-strong {
  font-weight: bold;
}
6 Likes
20

image. Screenshot%20from%202020-04-09%2017-52-57|690x123

edit:

Screenshot%20from%202020-04-09%2017-52-57
Screenshot%20from%202020-04-09%2017-52-57923×165 5.9 KB

Need to have an extra column in the barcodes sectionthat would display the barcode image.How do i go about customising?