How to print leaflet map in pdf using django-wkhtmltopdf?

[eruiz67]

I have a django app I am trying to print a leaflet map in pdf using django-wkhtmltopdf, but the map is not rendering correctly. I even try to give more time to the 'javascript-delay' parameter but is giving me the same result. Here is the image of the map:

from wkhtmltopdf.views import PDFTemplateResponse

class MyPDFView(View):
    template='agrimensuras/project_pdf.html' # the template 
    def get(self, request, pk):

        project = get_object_or_404(Project, id = int(pk))

        data  = {"project": project} 
                
        response = PDFTemplateResponse(request=request,
                                       template=self.template,
                                       filename="hello.pdf",
                                       context= data,
                                       show_content_in_browser=False,
                                       cmd_options={'margin-top': 10,
                                       "zoom":1,
                                       "viewport-size" :"1366 x 513",
                                       'javascript-delay':1000,
                                       'footer-center' :'[page]/[topage]',
                                       "no-stop-slow-scripts":True},
                                       )
        return response

In the template (I am just showing the relevant pieces of code):

<!--Importing leaflet-->
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
        crossorigin=""/>
      
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
        crossorigin=""></script>
    
     <!--Defining the div-->
      <div id="map" ></div>
    
    <!--Defining the map-->
    <script type="text/javascript">
    
         var map = L.map('map').setView([51.505, -0.09], 13);
         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
              minZoom: 5,
              maxZoom: 19,
              attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
          }).addTo(map);
         var marker = L.marker([51.5, -0.09]).addTo(map);
         
         var circle = L.circle([51.508, -0.11], {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius: 500
        }).addTo(map);

        var polygon = L.polygon([
        [51.509, -0.08],
        [51.503, -0.06],
        [51.51, -0.047]
        ]).addTo(map);
    </script>

[tonkolviktor]

a tipp, check if you see any network/CORS issues in the developer tab, and try with a OSM backend which support CORS, like: https://server.arcgisonline.com/ArcGIS/