Rendering map and including it's image in PDF report?

438 views
Skip to first unread message

Vladimir Kelman

unread,
Jun 8, 2016, 9:00:54 PM6/8/16
to jsreport
Maybe I did something stupid....
I tried to load Bing map in wrapped-html jsReport.

       <script type='text/javascript'>
            function loadMapScenario() {
                $('#mapDiv').html('hello');
              //  return;
                var map = new Microsoft.Maps.Map(document.getElementById('mapDiv'), {
                    credentials: 'Aj6d5Y92_S-KwO4DkiLxA2kmfjn-4w-vsYHuWuXH67tY2JPV2Ajif4GLAzfqb-i1',
                    center: new Microsoft.Maps.Location({{:lat}}, {{:lon}}),
                    showMapTypeSelector: false
                });
                var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
                    icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
                    anchor: new Microsoft.Maps.Point(12, 39)
                });
                map.entities.push(pushpin);

            }

       
            $("#printCommand").click(function() {
                var printTemplate = $.extend({}, jsreport.template);
                printTemplate.recipe = "phantom-pdf";
                printTemplate.content = document.documentElement.outerHTML;
           
                printTemplate.phantom = {
                    printDelay : 1000, /* wait a little bit for js rendering */
                    blockJavaScript : false, /* block pivot table from new rendering */                      
                };
                jsreport.render(printTemplate);
            });
        </script>

    <body onload='loadMapScenario();'>
        <button id="printCommand">Print</button>
  .     .      .

In wrapped-html it works, but when I clcik on the "Print" button to create PDF report it does not render any map if blockJavaScript : true and only renders base map if blockJavaScript : false.

So, what would be the proper way to render map and to include its image in PDF report?


Jan Blaha

unread,
Jun 9, 2016, 8:09:31 AM6/9/16
to jsreport
Would you be able to replicate the issue in playground? Thank you

Vladimir Kelman

unread,
Jun 10, 2016, 2:46:20 PM6/10/16
to jsreport
Jan, somehow wrapped-html version works on my local jsReport server but doesn't do anything on playground.
https://playground.jsreport.net/studio/workspace/rywV7FdN/6

On my local if I change type to phantom-pdf and set long print delay (like 1800) and resource timeout (like 10000) it shows map, but base map only.

Jan Blaha

unread,
Jun 10, 2016, 2:48:33 PM6/10/16
to jsre...@googlegroups.com
I see,

you would get it working on playground with linking references over https 

Let me check if I have some hints how to print

Jan Blaha

unread,
Jun 10, 2016, 3:11:19 PM6/10/16
to jsreport
Unfortunately, I get also only base map, not matter what I try.

- electron, phantomjs nor wkhtmltopdf is not getting the right result
- no message or error comming from phantomjs
- googling "Bing Maps phantomjs" or "Bing Maps wkhtmltopdf" doesn't bring any light
- I am kind of lost on this so far
 

Vladimir Kelman

unread,
Jun 15, 2016, 10:41:32 AM6/15/16
to jsreport
Jan,
Thanks for your quick responses anyway. I think Bing does some special/proprietary things incompatible with server-side rendering.
Anyway, it was just a quick proof-of-concept attempt on my side. Real application would work in NodeJs, communicate with PhantomJs to generate a temp file -  image of the map, and then Uri of that image would be sent to jSpReport as a parameter (REST call from NodeJs to jsReport using your jsreport-client module.

We currently have some C# web service which communicates with PhantomJs and then calls JasperServer. Plan is to replace it with NodeJs web service which would use PhantomJs and then call jsReport server.
Reply all
Reply to author
Forward
0 new messages