CODEWITHSUNDEEP
javascriptdjangoleafletwkhtmltopdfpdfkit
Luiz Carlos Macedo
Luiz Carlos Macedo

Reputation: 29

PDFKit rendering blank map instead a Leaflet Map

I want to download a PDF from a Django view. To do that, I have a function that is triggered by a link. The PDF will contain a Leaflet Map. This map has markers, polyline and circle.

I'm using PDFKit and wkhtmltopdf 0.12.5 (with patched qt).

The problem is that it isn't rendering. It just show "+", "-", "Leaflet" and all the rest is blank.

I've already tried some alternatives:

Approach: python-pdfkit convert webpage(JS generated) into PDF

wkhtmltopdf and leaflet wait for map

https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1648

Neither of them worked. The iframe I thought would have some solution, but it didn't render. The javascript-delay alternative, didn't work too.

My view:

def download_PDF(request):

    latlongs = request.session['latlongs']
    latitudeIni = float(request.session['latitudeIni'])
    longIni = request.session['longIni']

    option = {
        'dpi': 300,
        'image-dpi': 400,
        'zoom': 0.7,
        'window-status': 'maploaded',
        'javascript-delay' : '30000'        
    }

    argumento = {'latlongs' : latlongs,
        'latitudeIni' : latitudeIni,
        'longIni' : longIni}

    template = get_template('pdf_template/pdf_localizacao.html')

    html = template.render(argumento)  
    pdf = pdfkit.from_string(html, False, options=option)

    response = HttpResponse(pdf, content_type='application/pdf')
    response['Content-Disposition'] = 'attachment; filename="home_page.pdf"'

    return response

My html template:

<!DOCTYPE html>
<html>
<head>

... JS links...


<style>
...
.my-map{
        width: 800px;
        height: 600px;
        }
        /* .my-map div {
        transform: none !important;
        } */
</style>
</head>

<body>
    <!-- <iframe width="800" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"> -->
    <div id='map' class="my-map"></div>
    <!-- </iframe> -->
...
<script>
        var BING_KEY = 'AuhiCJHlGzhg93IqUH_oCpl_-ZUrIE6SPftlyGYUvr9Amx5nzA-WqGcPquyFZl4L'        
        var canvas = L.canvas();
        var map = L.map('map', {renderer : canvas}).setView({{ latlongs.0 }},15);
        var bingLayer = L.tileLayer.bing(BING_KEY).addTo(map);

        var orangeIcon = new L.Icon({
            iconUrl: '/image/marker-icon-2x-orange.png',
            shadowUrl: '/image/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });

        var circle = L.circle([{{ latitudeIni|safe }}, {{ longIni|safe }}], {
            color: 'yellow',
            fillColor: '#eff178',
            fillOpacity: 0.5,        
            radius: 1,
            renderer : canvas
        }).addTo(map);

        var marker = L.marker({{ latlongs.0 }}).addTo(map);
        marker.bindPopup("<b>Início do Duto</b><br>[Latitude,Longitude] = {{ latlongs.0 }}").openPopup();

        var marker = L.marker({{ latlongs|last }}).addTo(map);
        marker.bindPopup("<b>Final do Duto</b><br>[Latitude,Longitude] = {{ latlongs|last }}").openPopup();   

        var popup = L.popup();

        var printer = L.easyPrint({
                tileLayer: bingLayer,
                sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
                filename: 'myMap',
                exportOnly: true,
                hideControlContainer: true
            }).addTo(map);  

        var latlngs = {{ latlongs }};
        var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);


    </script>
</body>

The wkhtmltopdf don't give any error, or warning about the JS of the leaflet and its CSS.

I've tried many combinations of the links above and also from other sites.

Can anyone figure out the problem?

Upvotes: 1

Views: 986

Answers (1)

Euan Richard
Euan Richard

Reputation: 46

I had a similar issue and got it working in the end, but I found it very temperamental and had to significantly simplify my HTML/JS code.

  • Set L_NO_TOUCH = true; and L_DISABLE_3D = true;
  • Remove all instances of bindTooltip (in your case, bindPopup?)
  • For others searching, though not applicable to your case, I also had to remove the <meta name="viewport" /> tag, and any width or height settings on body and html.

Upvotes: 1

Related Questions