I want to make a button to print export a generated barcode as an svg or as an png
HTML code:
<input class="form-control" type="text" placeholder="put the code here">
<svg class="hidden" id="barcode" onclick="window.print(this)" id="svgObject" width="100" height="100"></svg>
<button class="btn btn-outline-danger">Generate</button>
<input class="btn btn-outline-danger" type="button" onclick="printDiv('print-content')" value="print"/>
</section>
<script src="jsBarcode.code128.min.js"></script>
<script src="index.js"></script>
js code:
document.querySelector("button").addEventListener("click" , function() {
var text = document.querySelector("input").value;
JsBarcode("#barcode", text);
document.getElementById("barcode").classList.remove("hidden")
});
function printDiv(divName) {
var printContents = document.getElementById(barcode).outerHTML;
w=window.open();
w.document.write(printContents);
w.print();
w.close();
}
I am using this barcode generator: https://lindell.me/JsBarcode/
When I use this code, it prints it as a PDF not an SVG or any image format.
2
As commented the browser’s print function won’t give you any conversion options.
File downloads
Since you already have a SVG output, all you need to do is create a data URL or a object URL you can apply to a <a> href attribute. By adding a download attribute the link will open a file download dialogue.
const barcode = document.getElementById('barcode');
const btnPrint = document.getElementById('btnPrint');
const btnGenerate = document.getElementById('btnGenerate');
//init example
(async() => {
generateCode()
})();
btnGenerate.addEventListener("click", () => {
generateCode()
});
btnPrint.addEventListener("click", () => {
printDiv()
});
async function generateCode() {
let text = document.querySelector("input").value;
JsBarcode("#barcode", text);
document.getElementById("barcode").classList.remove("hidden")
// generate SVG download
// serialize SVG markup
let markup = new XMLSerializer().serializeToString(barcode)
// create blob
let blob = new Blob([markup], {
type: 'image/svg+xml'
});
downloadSvg.href = URL.createObjectURL(blob)
//generate png output
let dataUrlPng = await svg2PngDataUrl(barcode)
downloadPng.href = dataUrlPng
}
/**
* svg to canvas
*/
async function svg2PngDataUrl(el, scale = 1, filter = "") {
/**
* clone svg to add width and height
* for better compatibility
* without affecting the original svg
*/
const svgEl = el.cloneNode(true);
// get dimensions
let {
width,
height
} = el.getBBox();
let w = el.viewBox.baseVal.width ?
svgEl.viewBox.baseVal.width :
el.width.baseVal.value ?
el.width.baseVal.value :
width;
let h = el.viewBox.baseVal.height ?
svgEl.viewBox.baseVal.height :
el.height.baseVal.value ?
el.height.baseVal.value :
height;
// apply scaling
[w, h] = [w * scale, h * scale];
// add width and height for firefox compatibility
svgEl.setAttribute("width", w);
svgEl.setAttribute("height", h);
// create canvas
let canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
// create blob
let svgString = new XMLSerializer().serializeToString(svgEl);
let blob = new Blob([svgString], {
type: "image/svg+xml"
});
let blobURL = URL.createObjectURL(blob);
let tmpImg = new Image();
tmpImg.src = blobURL;
tmpImg.width = w;
tmpImg.height = h;
tmpImg.crossOrigin = "anonymous";
await tmpImg.decode();
let ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, h);
// apply filter to enhance contrast
if (filter) {
ctx.filter = filter;
}
ctx.drawImage(tmpImg, 0, 0, w, h);
//create img data URL
let dataUrl = canvas.toDataURL();
return dataUrl;
}
function printDiv() {
var printContents = barcode.outerHTML;
w = window.open();
w.document.write(printContents);
w.print();
w.close();
}.btn {
border: 1px solid #000;
display: inline-block;
text-decoration: none;
color: inherit;
background: #eee;
padding: 0.3em;
font-size: 1em;
font-family: inherit;
line-height: 1em;
}<svg class="hidden" id="barcode" id="svgObject" width="100" height="100"></svg>
<p>
<input class="form-control" type="text" placeholder="put the code here" value="123456">
</p>
<p>
<button class="btn btn-outline-danger" id="btnGenerate">Generate</button>
<button class="btn btn-outline-danger" id="btnPrint">Print</button>
<a href="" class="btn" id="downloadSvg" download="barcode.svg">Download SVG</a>
<a href="" class="btn" id="downloadPng" download="barcode.png">Download PNG</a>
</p>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js"></script>For a rasterized png file output you need to draw the SVG on a <canvas> element and create a data URL via canvas.toDataURL(). See also “Convert SVG to image (JPEG, PNG, etc.) in the browser”
Downloads don’t work in SO snippets. See also working codepen example
0