How to Print Barcode Labels

olamide_shodunke · January 24, 2018, 5:18pm

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

max_morais_dmm · January 24, 2018, 7:31pm

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

olamide_shodunke · January 24, 2018, 7:58pm

Thanks Max

have you used it to print barcode label before?

Regards

max_morais_dmm · January 24, 2018, 8:05pm

@olamide_shodunke using Zebra printers yes!

farhanayyaz1 · January 25, 2018, 2:31pm

how to use this API

EnSeal · January 29, 2018, 12:40pm

@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

farhanayyaz1 · October 23, 2018, 6:27am

dear anyone has an update on this

sunhoww · October 30, 2018, 7:52pm

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 !

olamide_shodunke · October 31, 2018, 6:59am

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

Muzzy · October 31, 2018, 8:33am

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

sunhoww · October 31, 2018, 9:56am

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

github.com

libermatic/psd_customization/blob/6962502c93addcafc8bf72b501bec1647d5e2c62/psd_customization/public/js/item.js#L39-L65


      
          add_menu_item: function(frm) {
            if (!frm.doc.__islocal) {
              function hash(str) {
                const hashint =
                  str
                    .split('')
                    .reduce((a, x) => ((a << 5) - a + x.charCodeAt(0)) | 0, 0) >>> 0;
                const hashstr = hashint.toString();
                return `90${hashstr.slice(0, 10).padStart(10, '0')}`;
              }
              function checkdigit(code) {
                const mod = code
                  .split('')
                  .reverse()
                  .reduce(
                    (a, x, i) => (i % 2 ? parseInt(x) + a : parseInt(x) * 3 + a) % 10,
                    0
                  );
                return ((10 - mod) % 10).toString();
              }

This file has been truncated. show original

sunhoww · November 8, 2018, 7:43am

Another older barcode related thread

Mahendra_Rohit · February 22, 2020, 12:23pm

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

sunhoww · February 22, 2020, 1:04pm

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.

Mahendra_Rohit · February 27, 2020, 10:01am

Thanks for reply…
Finally i did…

Mahendra_Rohit · February 28, 2020, 9:25am

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)

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

krishnanhemanth · February 28, 2020, 12:04pm

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

michaeleino · March 6, 2020, 10:22pm

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

Mahendra_Rohit · March 8, 2020, 6:41am

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…

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

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

rajatkhandeparkar · April 9, 2020, 12:30pm

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

edit:

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