3

In my current project I need to print out one (or several) SVG graphics which are stored in different string variables. Each SVG must be printed out in a different page. How can I achieve that?

The reasons why I have SVG graphics as string variables is the following:

  • A 3pp library internally manages a drawing model and shows it in a HTML canvas. The drawing model can contain several pages (depending on the size of the model) but only one is shown in the canvas.
  • This 3pp library is able to return a JS string with the SVG graphic of the current page being shown.
  • A MUST of my application is to modify each SVG string to include a table with information.
  • Finally I must print each SVG (page) in a different page (paper sheet).

The option I've thought about is:

  • Place the contents of each string SVG in a new 'printable' HTML element and Use Window.print together with CSS printable options to print only those new elements.

However, this seems to be a very big 'workaround' and I don't know in advance if this could work.

Does anybody have better ideas? Any experiences?

Alejandro González
  • 481
  • 9
  • 22
  • You can add it using `[innerHTML]="mySvgString"` like shown in https://stackoverflow.com/a/41089093/217408. https://developer.mozilla.org/en/docs/Web/CSS/page-break-after sounds like it would with adding page-breaks. – Günter Zöchbauer Jul 19 '17 at 09:57
  • This would imply to define in the HTML one div per SVG. However I don't known at design time the number of pages and hence the number of div's. Can I add those div's dinamically from JS code to print and remove them afterwards? – Alejandro González Jul 19 '17 at 10:44
  • 1
    Sure, use `
    `, then just add the svg strings to the `svgs` array
     – Günter Zöchbauer Jul 19 '17 at 11:01
  • 1
    True! I didn't caught on that. Thanks for your help I'll test your advice and see what happens. – Alejandro González Jul 19 '17 at 11:03

0 Answers0