javascript - 当打印到 wkhtmltopdf 时，嵌入到网页中的谷歌地图溢出了它的边界

Question

我正在尝试追踪一个奇怪的错误，其中嵌入的 Google map 在页面的 HTML 版本中看起来很好，但是当我们使用 wkhtmltopdf 对其进行 PDF 化时， map 在保留在其框内的同时，也继续进入相邻页面。换句话说，如果 map 位于页面底部，则下一页有更多 map (如果 map 更大， map 的下一部分会出现什么)与顶部的内容重叠。如果 map 位于页面顶部，则前一页会获得额外的 map 内容。 The same page in three formats. Please forgive the rough MS Paint anonymization.

我尝试过很多东西，包括:

• 在各处添加额外的 div(之前、之后、立即之前、之后立即等)
• 为 map 所在的 div 及其包含的 div 尝试不同的溢出值
• 注释掉 map 上的叠加层
• 尝试使用我的 Google-fu 寻找解决方案，但失败了
• 可能还有其他一些我现在记不起来的事情。

有没有人见过这样的事情？关于可能导致它的原因有什么想法，或者对我应该探索的方向有什么建议吗？

https://jsfiddle.net/cosmos42/wj81zc13/1/ 相关部分的 fiddle - 希望它包含所有必要的信息。我从 fiddle 中取出了我们的 URL 和其他识别信息，因此 Google map 实际上不起作用...

预先感谢您的帮助。

var myCenter = new google.maps.LatLng(38.8977, -77.0366);

function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(38.8977, -77.0366),
    zoom: 19,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    panControl: false,
    zoomControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    rotateControl: false
  };

  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  var marker = new google.maps.Marker({
    position: myCenter,
  });

  marker.setMap(map);


  var ParcelLayer = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var proj = map.getProjection();
      var zfactor = Math.pow(2, zoom);
      // get Long Lat coordinates
      var top = proj.fromPointToLatLng(new google.maps.Point(coord.x * 256 / zfactor, coord.y * 256 / zfactor));
      var bot = proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * 256 / zfactor, (coord.y + 1) * 256 / zfactor));

      //corrections for the slight shift of the SLP (mapserver)
      var deltaX = 0.00;
      var deltaY = 0.00;

      //create the Bounding box string
      var bbox = (top.lng() + deltaX) + "," +
        (bot.lat() + deltaY) + "," +
        (bot.lng() + deltaX) + "," +
        (top.lat() + deltaY);

      //base WMS URL
      var url = "http://gis.someotherwebsitethatisntours.net:9080/geoserver/ttb/wms?";
      url += "&REQUEST=GetMap"; //WMS operation
      url += "&SERVICE=WMS"; //WMS service
      url += "&VERSION=1.1.0"; //WMS version  
      //url += "&LAYERS=" + "fm:parcel_socal"; //WMS layers
      url += "&LAYERS=" + "ttb:parcels_ca"; //WMS layers
      url += "&FORMAT=image/png"; //WMS format
      url += "&BGCOLOR=0xFFFFFF";
      url += "&TRANSPARENT=TRUE";
      url += "&SRS=EPSG:4326"; //set WGS84 
      url += "&BBOX=" + bbox; // set bounding box
      url += "&WIDTH=256"; //tile size in google
      url += "&HEIGHT=256";
      return url; // return URL for the tile

    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
  });

  var FloodLayer = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var proj = map.getProjection();
      var zfactor = Math.pow(2, zoom);
      // get Long Lat coordinates
      var top = proj.fromPointToLatLng(new google.maps.Point(coord.x * 256 / zfactor, coord.y * 256 / zfactor));
      var bot = proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * 256 / zfactor, (coord.y + 1) * 256 / zfactor));

      //corrections for the slight shift of the SLP (mapserver)
      var deltaX = 0.00;
      var deltaY = 0.00;

      //create the Bounding box string
      var bbox = (top.lng() + deltaX) + "," +
        (bot.lat() + deltaY) + "," +
        (bot.lng() + deltaX) + "," +
        (top.lat() + deltaY);

      //base WMS URL
      var url = "http://gis.someotherwebsitethatisntours.net:9080/geoserver/ttb/wms?";
      url += "&REQUEST=GetMap"; //WMS operation
      url += "&SERVICE=WMS"; //WMS service
      url += "&VERSION=1.1.0"; //WMS version  
      //url += "&LAYERS=" + "fm:parcel_socal"; //WMS layers
      url += "&LAYERS=" + "ttb:flood_poly"; //WMS layers
      url += "&FORMAT=image/png"; //WMS format
      url += "&BGCOLOR=0x99FF00";
      url += "&TRANSPARENT=TRUE";
      url += "&SRS=EPSG:4326"; //set WGS84 
      url += "&BBOX=" + bbox; // set bounding box
      url += "&WIDTH=256"; //tile size in google
      url += "&HEIGHT=256";
      return url; // return URL for the tile

    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
  });

  map.overlayMapTypes.push(ParcelLayer);


}
google.maps.event.addDomListener(window, \'load\', initialize);

			* {
			  box-sizing: border-box;
			}
			.clear {
			  clear: both;
			  display: block;
			  height: 0;
			  overflow: hidden;
			  visibility: hidden;
			  width: 0;
			}
			body {
			  overflow-x: hidden;
			  font-family: Arial, Helvetica, sans-serif;
			}
			.avoid {
			  margin: 4px 0;
			  page-break-inside: avoid !important;
			}
			.break_before {
			  clear: both;
			  display: block;
			  page-break-before: always;
			}
			.break_after {
			  clear: both;
			  display: block;
			  page-break-after: always;
			}
			.map_table,
			.main_table2 {
			  margin-left: 15px;
			  margin-right: 1px;
			  margin-top: 15px;
			  width: 640px;
			}
			.map_table {
			  page-break-inside: avoid;
			}
			.title {
			  color: #58595b;
			  font-size: 11px;
			  vertical-align: top;
			}
			.a_row .title {
			  margin-right: 0;
			  width: 100px !important;
			}
			.data {
			  vertical-align: top;
			  width: 255px !important;
			  color: #262262;
			  font-size: 11px;
			  font-weight: bold;
			  text-align: left;
			  text-transform: capitalize;
			}
			.a_row .data {
			  width: 220px !important;
			}
			.main_table2 .bottom_border {
			  border-bottom: 1px solid #CCC;
			}
			.main_table2 .bottom_border {
			  height: 0;
			  margin: 0;
			  padding: 0 !important;
			  width: 100%;
			}
			.main_table2 .a_cell,
			.main_table2 .a_title {
			  padding: 5px;
			}
			.map_table img {
			  padding: 10px;
			}
			.map_table .a_row {
			  border: 3px solid #262262;
			}
			.a_table {
			  display: block;
			  overflow: hidden;
			}
			.a_row,
			.a_comp_row {
			  display: block;
			  overflow: hidden;
			}
			.a_cell,
			.a_title {
			  display: inline-block;
			  float: left;
			  vertical-align: top;
			}
			.a_table,
			.a_title,
			.a_cell {
			  border: 0 none;
			}
			.page_table2 {
			  width: 670px !important;
			}
			.inner_table {
			  margin-left: 15px;
			  margin-right: 15px;
			  width: 640px;
			}
			.a_title {
			  font-weight: bolder;
			  background-color: #262262;
			  color: white;
			  text-align: left !important;
			}
			.dont_split {
			  page-break-inside: avoid !important;
			}
			.prior_transfer .a_row .title {
			  width: 110px!important;
			}
			.prior_transfer .a_row .data {
			  width: 210px!important;
			}
			p {
			  margin: 0 !important;
			  display: block;
			  margin-block-end: 1em;
			  margin-block-start: 1em;
			}
			@media print {
			  .web_only {
			    display: none;
			  }
			

<body>
  <div class="page_table2 a_table">
    <div class="a_row">
      <div class="a_cell">
        <div class="a_table main_table2 inner_table dont_split prior_transfer">
          <div class="a_row">
            <div class="a_title" style="width: 100%;">
              <p>Prior Transfer</p>
            </div>
          </div>
          <div class="a_row">
            <div class="a_cell title">Recording Date:</div>
            <div class="a_cell data">2/11/2014</div>
            <div class="a_cell title">Doc #:</div>
            <div class="a_cell data">4242-424242</div>
          </div>
          <div class="bottom_border"></div>
          <div class="a_row">
            <div class="a_cell title">Transfer Amount:</div>
            <div class="a_cell data">$ 42,000</div>
            <div class="a_cell title">Doc Type:</div>
            <div class="a_cell data">-</div>
          </div>
          <div class="bottom_border"></div>
          <div class="a_row">
            <div class="a_cell title">Type of Sale:</div>
            <div class="a_cell data">Standard</div>
            <div class="a_cell title">Title Co:</div>
            <div class="a_cell data">Some Title Company</div>
          </div>
          <div class="bottom_border"></div>
        </div>
      </div>
    </div>
    <div class="a_row">
      <div class="a_cell">
        <div class="a_table map_table inner_table dont_split">
          <div class="a_row">
            <div class="a_title" style="width: 100%; height: 20px;">
              <p>Aerial Map</p>
            </div>
          </div>
          <div class="a_row">
            <div class="a_cell">

              <div id="googleMap" style="width:636px;height:380px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="a_row">
      <div class="a_cell">
        <div class="a_table main_table2 inner_table dont_split prior_transfer">
          <div class="a_row">
            <div class="a_title" style="width: 100%;">
              <p>Prior Transfer</p>
            </div>
          </div>
          <div class="a_row">
            <div class="a_cell title">Recording Date:</div>
            <div class="a_cell data">2/11/2014</div>
            <div class="a_cell title">Doc #:</div>
            <div class="a_cell data">4242-424242</div>
          </div>
          <div class="bottom_border"></div>
          <div class="a_row">
            <div class="a_cell title">Transfer Amount:</div>
            <div class="a_cell data">$ 42,000</div>
            <div class="a_cell title">Doc Type:</div>
            <div class="a_cell data">-</div>
          </div>
          <div class="bottom_border"></div>
          <div class="a_row">
            <div class="a_cell title">Type of Sale:</div>
            <div class="a_cell data">Standard</div>
            <div class="a_cell title">Title Co:</div>
            <div class="a_cell data">Some Title Company</div>
          </div>
          <div class="bottom_border"></div>
        </div>
      </div>
    </div>
  </div>
</body>

Answer 1

#googleMap {
 overflow:hidden;
}