How to Print Barcode Labels

63

I think it has some thing to do with website rendering capabilites offered by the wkhtmltopdf.

In my v13 erpnext full web page view, from what I saw, it was a full standard website that allow javascript execution and the barcode rendered successfully.

But in PDF-like view, the erpnext system only call the wkhtmltopdf get_pdf method, which I believe they do not render the javascript. I’ve tried this by getting the output of the get_pdf() method of frappe’s pdf.py file in frappe utils directory and the output was clearly a plain text of jsbarcode javascript without being rendered.

I also notice that in v13 of erpnext, the barcode type is included in the database as an svg tag longtext type , therefore when erpnext print a pdf like page, it doens’t render any javascript aymore. Instead, erpnext just show the svg data already saved previously in the database.

1 Like
64

How to obtain multiple barcode in print format? Can you please share me the code to print all the barcodes i have created in item ? Thank you

65

did u find the solution? If yes, please share

66

the barcode will appear in the print dialog. Just proceed with the print. you can view the print in the browser’s print dialog preview.

67

you have loop through barcodes table.
{%- for barcode in doc.barcodes -%}
Place your barcode logic inside this loop
pass the barcode value like below.
jsbarcode-value= {{ barcode }}
{%- endfor-%}

68

Hello Everyone,

I have been trying to get barcode printing possible for two days now using JsBarcode with no luck. after googling for quite a while, I discovered a simple solution for barcodes.
Using Google Fonts, there are many fonts that convert text to barcodes, so I simply included the font in the print format HTML and targeted it using CSS.

Barcode fonts: https://fonts.google.com/?query=barcode

I am running version: 13.32.0

Steps:

  1. Create a new print format and call it “Barcode” or any name you wish.
  2. DocType: Item
  3. Module: Stock
  4. Default Print Language: en-US (or any other)
  5. Check the “Customer Format” checkbox
  6. Keep the “disabled” checkbox unchecked.
  7. Print Format Type is set to Jinja
  8. Keep the “Raw Format” checkbox unchecked.

Here is the HTML

<!DOCTYPE html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+39&family=Poppins&display=swap" rel="stylesheet">

<style>

.dashboard-section{
    border: 1px solid;
    border-color: black; 
    width: max-content;
    padding: 6px 15px 6px 15px;   
}

.barcode-container {
    margin-top: 12px
}

.barcode-label-container{
    text-align: center;
}
.barcode{
font-family: 'Libre Barcode 39', cursive;
font-size: 40px;
}

</style>

<div class="dashboard-section">
  <div class="barcode-label-container">
    <div id="barcode-label" class="barcode-label">
      <div class="label-item-name label-field">
          {{ doc.item_name }}
      </div>

      
      <div class="label-item-barcode label-field">
        <div class="barcode-container">
            <div class="barcode">
               {{ doc.item_code  }}
             </div>
        </div>
        <div class="item-code">
               Item Code: {{ doc.item_code  }}
        </div>
      </div>

        <div class="label-item-price label-field">
            {{ doc.standard_rate  }}
        </div>
    </div>
  </div>
</div>
</html>

CSS:

.dashboard-section{
    border: 1px solid;
    border-color: black; 
    width: max-content;
    padding: 6px 15px 6px 15px;   
}

.barcode-container {
    margin-top: 12px
}

.barcode-label-container{
    text-align: center;
}
.barcode{
font-family: 'Libre Barcode 39', cursive;
font-size: 40px;
}

Result:

barcode
barcode782×659 16.5 KB

The barcode is based on item code, if you wish to make the barcode based on the barcode field, just do what @MrKovalski did. I used his code as a base for my code.

Hope this helps :slight_smile:

14 Likes
69

hey, i did try to do it step by step but the font did not load properly or i do not know where it went wrong. if you could help me with it.

Screenshot 2022-12-20 144524
Screenshot 2022-12-20 144524825×467 13.3 KB

70

Can you please share your HTML and CSS?

72

Has anyone figuring out how to print all barcodes of a selected warehouse, or we can select multiple barcodes so we don’t print 1 barcode per paper? Any guide or instructions?

73

Hi, barcode is printed but scanner doesn’t recognize it…what is the issue??
Screenshot 2023-05-30 200629

74

Can’t scan or ID the barcode, what type of barcode were you trying to generate?

75

How can we change the print format size to the barcode sticker size?
Can anyone help with this issue?

76

What are you printing to? Is it multiple barcodes on a sheet of A4 or individual labels on a roll?

77

individual labels on roles.

78

I want to generate the PDF like in the below image.
All barcode stickers in separate PDF pages and then the invoice or order form of these items.
I created the barcode stickers but the issue is to create multiple PDF pages with the sticker’s size.

Even a single sticker is showing on the whole page of the PDF.
The sticker size is 45mm x 36mm so the PDF page size should be the same as the sticker size.

image
image1155×679 118 KB

79

What brand of label printer are you using, is it local or networked?

80

zebra m400

81

Have a look at this

I was able to setup a Zebra 110xi4 to print labels exactly as I needed them to be, and also allow end user to select how many labels to print.

82

How can we generate the PDF with all labels each label on a separate page with the label size page?

83

What version of ERPnext are you using?

I could not find an easy way to print labels to a Zebra printer from ERPNext in v14 or develop, but I managed to work out a few things and got it to work as I described in the post. It’s not a 5 minute job but it works very well once it’s setup.