Search code examples
htmlcsssvgerpnext

How to show up html svg tag while printing in print preview


I have an SVG tag in my HTML which prints barcode on the screen and works, but when I try to print that document it does not appear in the print preview. Everything else except the barcode gets displayed. I'm guessing that the document isn't getting enough time to render all the rect divs forming the barcode SVG, that is why it's not displaying, but failing to solve the problem. Any help would be really appreciated!

I've tried media print like so: I gave an id (#b) to the div where I was printing my barcode and in CSS wrote:

@media print {
  #b {
    display: block;
  }
}

Solution

  • I could solve the above issue by using an external javascript library. The system I was working with already had the functionality that generated the barcode and it works well, it just didn't render it while actually printing the document by a print button the system has no matter what browser I was using.

    So I just used this js library called JsBarcode just to render the barcode at the runtime and it also displays it in the print preview.