Is this working with version 13
Try adding CSS within the html section. I found sometimes the CSS does not work properly. So I usually add it to the HTML section. Most of the time this worked fine.
1 Like
I’m trying in v12
yes working in v13
i have given the print format as given but barcode is not showing in print in version 13
print format HTML
<div class="dashboard-section">
<div class="barcode-label-container">
<div id="barcode-label" class="barcode-label">
<div class="barcode-header">Test</div>
<div class="barcode-text">
<span class="barcode-strong">{{ doc.item_name }}</span>
</div>
<div class="text-center">
<svg class="barcode"
jsbarcode-format="ean13"
jsbarcode-value= {{ doc.barcodes[0].barcode }}
jsbarcode-height = 30
jsbarcode-width = "1.5"
js-barcode-fontSize = 10
jsbarcode-textmargin="0"
jsbarcode-fontoptions="bold">
</svg>
</div>
<div class="barcode-foot barcode-strong barcode-rotated">
{{ doc.get_formatted("standard_rate", doc) }}
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
<script>
JsBarcode(".barcode").init();
</script>
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;
}
Do you have access to the internet ?
Cause you need it to read this.
If you do not want to give access to internet then host this file locally and point it to the local address.
So far the CSS seem to work in your screenshot only barcode is missing.
Can it be a conflict ?
In v13 I can see JsBarcode has been included in frappe node module
I have the same difficulty with v13 too and I can confirm I have the internet access
Can you recheck the same by clicking on the “Full Page” Button if it is being rendered there?
no picture nor barcode rendered.
I even removed all css and no barcode rendered.
I’ve also tried to host the jsbarcode on local server and no barcode rendered either.
Do you know how to debug this print format ? Because it’s a blind act here without knowing what’s wrong
I’ve tried to work it out in v13 , and this time mimic-ing frappe repo from this file
frappe\public\js\frappe\form\controls\barcode.js
And another difference is I import the barcode js provided by frappe using this tag :
<script src="assets/frappe/node_modules/jsbarcode/dist/JsBarcode.all.min.js"></script>
The complete my try-out html script is like this :
<div class="dashboard-section">
<div class="barcode-label-container">
<div id="barcode-label" class="barcode-label">
<div class="barcode-header">TESTER</div>
<div class="serial-no">
<span class="barcode-strong">serial number : {{ doc.serial_no }}</span>
</div>
<div class="barcode-text">
<span class="barcode-strong">serial number barcode type : {{ doc.serial_barcode }}</span>
</div>
<div class="barcode-text">
<span class="barcode-info">serial number jsbarcode import </span>
</div>
<div class="text-center">
<span class="barcode-data">
<svg class="barcode"
width="100%"
data-barcode-value="{{ doc.serial_barcode }}"
>
</svg>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
JsBarcode(".barcode", "{{ doc.serial_barcode }}", {
format: "code128",
height: 50,
fontSize: 16,
width: 3,
});
</script>
<script src="assets/frappe/node_modules/jsbarcode/dist/JsBarcode.all.min.js"> </script>
By using this method, I was able to perform print directly to the printer, but it will not work is the target print is pdf like .
Is there any difference in the method between direct print and pdf print ? Can someone elaborate on this ?
On one of our V13 sites, clicking on “Full Page” made the barcodes visible. Any idea why this behavior ?
Kind regards
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
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
did u find the solution? If yes, please share
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.
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-%}
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:
- Create a new print format and call it “Barcode” or any name you wish.
- DocType: Item
- Module: Stock
- Default Print Language: en-US (or any other)
- Check the “Customer Format” checkbox
- Keep the “disabled” checkbox unchecked.
- Print Format Type is set to Jinja
- 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:
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 
14 Likes
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.
Can you please share your HTML and CSS?