fix: render barcodes in print view
This commit is contained in:
parent
f12b5c081b
commit
97c3ce6408
3 changed files with 48 additions and 1 deletions
|
|
@ -499,7 +499,16 @@ frappe.ui.form.PrintView = class {
|
||||||
this.$print_format_body
|
this.$print_format_body
|
||||||
.find("body")
|
.find("body")
|
||||||
.html(`<div class="print-format print-format-preview">${out.html}</div>`);
|
.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.show_footer();
|
||||||
|
|
||||||
this.$print_format_body.find(".print-format").css({
|
this.$print_format_body.find(".print-format").css({
|
||||||
|
|
|
||||||
|
|
@ -157,6 +157,9 @@ data-fieldname="{{ df.fieldname }}" data-fieldtype="{{ df.fieldtype }}"
|
||||||
{% elif df.fieldtype=="Signature" %}
|
{% elif df.fieldtype=="Signature" %}
|
||||||
<img src="{{ doc[df.fieldname] }}" class="signature-img img-responsive"
|
<img src="{{ doc[df.fieldname] }}" class="signature-img img-responsive"
|
||||||
{%- if df.print_width %} style="width: {{ get_width(df) }};"{% endif %}>
|
{%- 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]) %}
|
{% elif df.fieldtype in ("Attach", "Attach Image") and frappe.utils.is_image(doc[df.fieldname]) %}
|
||||||
<img src="{{ doc[df.fieldname] }}" class="img-responsive"
|
<img src="{{ doc[df.fieldname] }}" class="img-responsive"
|
||||||
{%- if df.print_width %} style="width: {{ get_width(df) }};"{% endif %}>
|
{%- if df.print_width %} style="width: {{ get_width(df) }};"{% endif %}>
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,41 @@
|
||||||
<title>{{ title }}</title>
|
<title>{{ title }}</title>
|
||||||
<meta name="generator" content="frappe">
|
<meta name="generator" content="frappe">
|
||||||
{{ include_style('print.bundle.css') }}
|
{{ 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 %}
|
{% if print_style %}
|
||||||
<style>
|
<style>
|
||||||
{{ print_style }}
|
{{ print_style }}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue