Merge pull request #37662 from safwansamsudeen/improve-barcode

fix: render barcodes in print view

frappe/printing/page/print/print.js

@@ -483,7 +483,14 @@ 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];
+		iframeDoc.querySelectorAll("svg[data-barcode-value]").forEach((el) => {
+			const get_options = frappe.ui.form.ControlBarcode.prototype.get_options.bind({
+				df: { options: el.dataset.options },
+			});
+			JsBarcode(el, el.dataset.barcodeValue, get_options(el.dataset.barcodeValue));
+			el.setAttribute("width", "100%");
+		});
 		this.show_footer();
 
 		this.$print_format_body.find(".print-format").css({

frappe/public/js/frappe/form/controls/barcode.js

@@ -64,7 +64,7 @@ frappe.ui.form.ControlBarcode = class ControlBarcode extends frappe.ui.form.Cont
 		options.height = "50";
 
 		if (frappe.utils.is_json(this.df.options)) {
-			options = JSON.parse(this.df.options);
+			Object.assign(options, JSON.parse(this.df.options));
 			if (options.format && options.format === "EAN") {
 				options.format = value.length == 8 ? "EAN8" : "EAN13";
 			}

frappe/public/js/print.bundle.js

@@ -0,0 +1,25 @@
+import JsBarcode from "jsbarcode";
+
+function get_options(value, df_options = null) {
+	let options = {};
+	options.fontSize = "16";
+	options.width = "3";
+	options.height = "50";
+	if (df_options) {
+		Object.assign(options, JSON.parse(df_options));
+		if (options.format && options.format === "EAN") {
+			options.format = value.length == 8 ? "EAN8" : "EAN13";
+		}
+	}
+	return options;
+}
+
+window.render_barcode = (el) => {
+	const value = el.dataset.barcodeValue;
+	try {
+		JsBarcode(el, value, get_options(value, el.dataset.options));
+		el.setAttribute("width", "100%");
+	} catch (e) {
+		console.log(e);
+	}
+};

frappe/templates/print_formats/standard_macros.html

@@ -157,6 +157,8 @@ 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" and not doc[df.fieldname].startswith("<svg") %}
+		<svg data-barcode-value="{{ doc[df.fieldname] }}" height="80" data-options='{{ df.options }}'></svg>
 	{% 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 %}>

frappe/www/printview.html

@@ -6,6 +6,7 @@
 	<title>{{ title }}</title>
 	<meta name="generator" content="frappe">
 	{{ include_style('print.bundle.css') }}
+	{{ include_script('print.bundle.js') }}
 	{% if print_style %}
 		<style>
 		{{ print_style }}
@@ -43,6 +44,7 @@
 				footer_html.style.order = 1;
 				footer_html.style.marginTop = '20px';
 			}
+			document.querySelectorAll("svg[data-barcode-value]").forEach(render_barcode)
 		});
 	</script>
 </body>