为什么jsPDF无法在我的角度应用程序中保存带有内部地图的Div？

Question

你好，你能帮我吗？我正在使用Angular和jsPDF库以及MapBox构建一个小项目。我想使用jsPDF将地图另存为PDF文件。

显然，一切正常，我可以保存带有标题的PDF文件，但不能在现场保存地图。它仅显示地图的标题和图例，而不显示地图。

如果我尝试使用ricgh，请单击>打印>另存为PDF，效果很好，它将地图及其标记保存在现场。

这里是代码

import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';
// dependencia de mapbox
import * as Mapboxgl from 'mapbox-gl';
// dependencia jsPDF
import jsPDF from 'jspdf';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  // se declara aca para que tenga alcance goblay y se pueda llamar en el metodo
  map: Mapboxgl.map;
  constructor() { }

  ngOnInit() {

    this.createMap();

  }

  // crear mapa
  createMap() {
    Mapboxgl.accessToken = environment.mapBoxKey;
    this.map = new Mapboxgl.Map({
      container: 'mapa-mapbox', // container id
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-88.8695, 13.5122],
      pitch: 45, // pitch in degrees
      bearing: 6, // bearing in degrees // starting position
      zoom: 8.3 // starting zoom
    });
    // full screem bottom
    this.map.addControl(new Mapboxgl.FullscreenControl());
    // navigation controls
    this.map.addControl(new Mapboxgl.NavigationControl());
  }



  // crear marcador;
  createMarker(Lng: number = -89.2182, Lat: number = 13.6929) {

    const marker = new Mapboxgl.Marker({
      draggable: true
    })
      .setLngLat([Lng, Lat])
      .addTo(this.map);
  }

  imprimirPDF() {
    const documento = new jsPDF();
    documento.fromHTML(document.querySelector('#map'), 20, 30);
    documento.save('GeoMap');

  }

}

模板

<div class="animated fadeIn">
  <!-- Encabezado -->
  <div  id="map">
  <div class="row d-flex justify-content-center mt-5">
    <p class="h1">Marker Maker Map</p>
  </div>
  <!-- Encabezado -->

    <!-- Mapa -->
    <div id="mapa-mapbox" class="col-11 col-md-10 offset-md-1 mt-2" (contextmenu)="createMarker()">
    </div>
    <!-- Mapa -->
  </div>

 <div class="row d-flex justify-content-center">
         <!-- botones -->
         <a class="btn-floating btn-sm btn-success" (click)="createMarker()"><i class="fas fa-map-marker-alt"></i></a>
         <a class="btn-floating btn-sm btn-danger ml-1" (click)="imprimirPDF()"><i class="fas fa-print"></i></a>
         <!-- botones -->
 </div>
  <!-- lista de eventos -->
  <div class="row mt-5">

    <div class="col-12 col-md-5 offset-md-1  d-none d-md-block">
      <img class="img-responsive" src="https://media.giphy.com/media/3ohhwgrL4KKPIZoTQY/giphy.gif" alt="animation">
    </div>

    <div class="col-12 col-md-5">
      <div class="text-center">
        <p class="h3">Features</p>
      </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">1- You can use a right click to add a new marker</li>
      <li class="list-group-item">2- You can drag a marker by holding a left click</li>
      <li class="list-group-item">3-  you can rotate the map</li>
      <li class="list-group-item">4- You can add a new marker using the green button</li>
      <li class="list-group-item">5- You can use the full screem mode</li>
    </ul>
  </div>

  </div>
  <!-- lista de eventos -->
</div>

使用ricgh单击>打印>另存为PDF

您能帮我吗？