fix: render barcodes in print view

This commit is contained in:
Safwan Samsudeen 2026-02-27 17:19:28 +05:30
parent f12b5c081b
commit 97c3ce6408
3 changed files with 48 additions and 1 deletions

View file

@ -499,7 +499,16 @@ frappe.ui.form.PrintView = class {
this.$print_format_body
.find("body")
.html(`<div class="print-format print-format-preview">${out.html}</div>`);
const iframeDoc = this.$print_format_body[0];
const script = iframeDoc.createElement("script");
script.src = "https://cdn.jsdelivr.net/npm/jsbarcode@3/dist/JsBarcode.all.min.js";
script.onload = () => {
iframeDoc.querySelectorAll("svg[data-barcode-value]").forEach((el) => {
JsBarcode(el, el.dataset.barcodeValue, { width: 3, height: 50, fontSize: 16 });
el.setAttribute("width", "100%");
});
};
iframeDoc.head.appendChild(script);
this.show_footer();
this.$print_format_body.find(".print-format").css({

View file

@ -157,6 +157,9 @@ data-fieldname="{{ df.fieldname }}" data-fieldtype="{{ df.fieldtype }}"
{% elif df.fieldtype=="Signature" %}
<img src="{{ doc[df.fieldname] }}" class="signature-img img-responsive"
{%- if df.print_width %} style="width: {{ get_width(df) }};"{% endif %}>
{% elif df.fieldtype=="Barcode" %}
<svg data-barcode-value="{{ doc[df.fieldname] }}" height="80"></svg>
<script>get_barcode_html("{{ doc[df.fieldname] }}");</script>
{% elif df.fieldtype in ("Attach", "Attach Image") and frappe.utils.is_image(doc[df.fieldname]) %}
<img src="{{ doc[df.fieldname] }}" class="img-responsive"
{%- if df.print_width %} style="width: {{ get_width(df) }};"{% endif %}>

View file

@ -6,6 +6,41 @@
<title>{{ title }}</title>
<meta name="generator" content="frappe">
{{ include_style('print.bundle.css') }}
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3/dist/JsBarcode.all.min.js"></script>
<script>
function get_options(value) {
// get JsBarcode options
let options = {};
options.fontSize = "16";
options.width = "3";
options.height = "50";
// options.format = value.length == 8 ? "EAN8" : "EAN13";
// if (frappe.utils.is_json(this.df.options)) {
// options = JSON.parse(this.df.options);
// if (options.format && options.format === "EAN") {
// options.format = value.length == 8 ? "EAN8" : "EAN13";
// }
// }
return options;
}
function get_barcode_html(value) {
if (value) {
// Get svg
const svg = document.querySelector(`[data-barcode-value="${value}"]`);
try {
JsBarcode(svg, value, get_options(value));
$(svg).attr("width", "100%");
return 'hey';
} catch (e) {
console.log(e)
}
}
}
</script>
{% if print_style %}
<style>
{{ print_style }}