Loading ...
Sorry, an error occurred while loading the content.

Printing only SVG in Web Page

Expand Messages
  • fhemsher
    About a year ago I needed to print the visible/dynamic svg in my web page. It was a hack. but it worked. However, because of HTML5 and canvas with jQuery is
    Message 1 of 3 , Dec 12, 2013
    • 0 Attachment

      About a year ago I needed to print  the visible/dynamic svg in my web page. It was a hack. but it worked. However, because of HTML5 and canvas with jQuery is it is now sweet...So I would like to share.(IE/Chrome/FF)


      1.) Firstly you can place the jQuery api in your html head.:

           <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>


      2.) Then make sure your svg  to be printed is contained in a div:

      <div id=svgDiv>

      <svg... </svg>

      </div>


      3). Place an empty canvas element in your html page:.

      <canvas id=printCanvas></canvas>


      4) place a print button where desired:

      <button onclick=printSVG()>print</button>


      5) Then call the following:


      var printSVG = function() {
        var popUpAndPrint = function()
        {
         dataUrl = [];

          $('#printCanvas').filter(function() {
            dataUrl.push(this.toDataURL("image/png"));
          })

          var container = $('svgDiv');

          var width = 1200
          var height = 600

          $(container).find('canvas').each(function(i, item) {
            $(item).replaceWith(
              $('<img>')
                .attr('src', dataUrl[i]))
                .css('position', 'absolute')
                .css('left', '0')
                .css('top', '0')
                .css('width', width + 'px')
                .css('height', height + 'px');
          });
          var printWindow = window.open('', 'PrintMap',
            'width=' + width + ',height=' + height);
          printWindow.document.writeln($(container).html());
          printWindow.document.close();
          printWindow.focus();
        };

        setTimeout(popUpAndPrint, 500);
      };


      That;s it. I also use it to print the visible map created via Google World Map v3 api.



    • Bjoern Hoehrmann
      ... Are you sure it wouldn t be easier to simply clone the ` ` into the new document? Conversion to a low resolution bitmap graphic is also likely to
      Message 2 of 3 , Dec 12, 2013
      • 0 Attachment
        * <fhemsher@...> wrote:
        >About a year ago I needed to print the visible/dynamic svg in my web
        >page. It was a hack. but it worked. However, because of HTML5 and canvas
        >with jQuery is it is now sweet...So I would like to share.(IE/Chrome/FF)

        > var printSVG = function() {
        > var popUpAndPrint = function()
        > {
        > dataUrl = [];
        > $('#printCanvas').filter(function() {
        > dataUrl.push(this.toDataURL("image/png"));
        > })

        > var printWindow = window.open('', 'PrintMap',
        > 'width=' + width + ',height=' + height);
        > printWindow.document.writeln($(container).html());
        > printWindow.document.close();
        > printWindow.focus();

        Are you sure it wouldn't be easier to simply clone the `<svg>` into the
        new document? Conversion to a low resolution bitmap graphic is also
        likely to result in inferior printing quality.
        --
        Björn Höhrmann · mailto:bjoern@... · http://bjoern.hoehrmann.de
        Am Badedeich 7 · Telefon: +49(0)160/4415681 · http://www.bjoernsworld.de
        25899 Dagebüll · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/
      • fhemsher
        Yes,.. actually, the code was ignoring the dataURL request and copying the div contents directly to the print HTML as svg. Therefore the printCasvas is not
        Message 3 of 3 , Dec 13, 2013
        • 0 Attachment

          Yes,.. actually, the  code was ignoring the dataURL request and copying the div contents directly to the print HTML as svg. Therefore the printCasvas is not required for the svg print. and the code changed to

          the much simpler(he clone  is  not required)


          var printSVG = function() {
            var popUpAndPrint = function()
            {
              var container = $('#svgDiv');
              var width = 1200
              var height = 600
              var printWindow = window.open('', 'PrintMap',
                'width=' + width + ',height=' + height);
              printWindow.document.writeln($(container).html());
              printWindow.document.close();
              printWindow.focus();
            };
            setTimeout(popUpAndPrint, 500);
          };

        Your message has been successfully submitted and would be delivered to recipients shortly.