Generate PDF from HTML with Map (exactly a screenshot)

Question

Hi I have this html with some content and a map, using Leaflet api for map rendering (jsfiddle) This whole content is part of a modal panel which open on a button click after user input some data. I want to export all content into a pdf with some client side solution.

I have tried jspdf like but it does not works. tried combination of canvastohtml and jspdf like but could not able to make it work either. Point to mentione here is my content contains map which export jspdf doesn't support

Anyone knows a solution, please share. I have included the code below

PS: Using phamtomjs screenshot utilities is not an option

<script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
<link href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" rel="stylesheet" />

<body>

  <script>
    function createMap(mapPlaceHolderId) {
      var OSM_MAP_TILE_SERVER_URL = 'http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png';

      var DEFAULT_MAP_CENTER = L.latLng(25.296854389343867, 51.48811340332031);
      var DEFAULT_MAP_ZOOM = 12;
      var MAP_ZOOM_MAX = 19;
      var MAP_ZOOM_SEARCH = 17;

      var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
      var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
      var osm = new L.TileLayer(osmUrl, {
        minZoom: 8,
        maxZoom: 12,
        attribution: osmAttrib
      });


      var map = L.map(mapPlaceHolderId).setView([51.505, -0.09], 13);

      map.addLayer(osm);

      return map;

    }
  </script>

  <div id="vrSubReportContainer">
    <div class="mapPopupTableContainer">
      <div class="mapPopupTableData"><b>Plate Number:</b> 009-001GL-297286, <b>Driver Name:</b> Unknown driver
        <br><b>Latitude,Longitude</b>: 25.215238,51.605439</div>

    </div>
    <div id="mapContainer" class="map-container">
      <div class="map" id="fd_map_canvas"></div>
    </div>
  </div>

  <script>
    (function() {
      createMap('fd_map_canvas');

    })();
  </script>


</body>

Generate PDF from HTML with Map (exactly a screenshot)

0 Answers0