Gary Gary - 16 days ago 6
Javascript Question

Print multipage line drawing in a browser without scalling

I want to print a multipage line drawing in a browser without scaling so it can be assembled. One inch needs to be one inch. Alignment marks and horz/vert page number would be a plus.

I have played around with SVG to accomplish this and failed. I have also created a pdf of a 12" by 12" box with that looks like what I want.

I have created a fiddle of my attempts. It prints but not at scale and only prints on 1 page. Here is the javascript.

printSVG = function() {
alert("Print")
var popUpAndPrint = function() {

var printWindow = window.open('', 'PrintMap');
var toPrint = $('#toPrint')

printWindow.document.writeln(toPrint.html())
printWindow.document.close();
printWindow.print();
printWindow.close();
};
setTimeout(popUpAndPrint, 500);
};


and the SVG

<svg width="12in" height="12in">
<polyline points="
0,0
1200,1200
" style="fill:none;stroke:black;stroke-width:1;" />
<polyline points="
1200,0
0,1200
" style="fill:none;stroke:black;stroke-width:1" />
<polyline points="
0,0
1200,0
1200,1200
0,1200
0,0
" style="fill:none;stroke:black;stroke-width:1" />
</svg>

Answer

I couldn't get it (in Chrome) to perfectly obey the measurements of 12in, but I came close when I told it to use larger dimensions: https://jsfiddle.net/dnx5s6h1/16/

Using CSS (inside of the copied DIV), I told the browser to expect that the page is a regular 8.5in x 11in, and its content is 20 inches. Then, it finally obeyed and printed on multiple pages.

<style>
  @media only print
  {
    html, body
    {
      width: 8in;
      height: 10in;
      margin: .5in;
    }
  }
</style>

Feel free to add margins to you SVG object to get it to print at the bottom of your page.

Comments