Question

您好我有一些内容和地图的html，使用Leaflet api进行地图渲染（jsfiddle）这整个内容是模式面板的一部分，在用户输入后点击按钮时打开数据即可。我想通过一些客户端解决方案将所有内容导出到pdf中。

我尝试过jspdf like，但它不起作用。尝试过canvastohtml和jspdf like的组合，但无法使其工作。这里提到的是我的内容包含导出jspdf不支持的地图

任何人都知道解决方案，请分享。我已经包含了以下代码

PS：使用phamtomjs screenshot utilities不是一个选项

<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>

使用地图从HTML生成PDF（完全是屏幕截图）

0 个答案: