PDFKit отображает пустую карту вместо Leaflet Map - PullRequest
Новая
       23

PDFKit отображает пустую карту вместо Leaflet Map

0 голосов
/ 26 сентября 2019

Я хочу скачать PDF из представления Django.Для этого у меня есть функция, которая запускается по ссылке.В PDF будет содержаться листовка с картой.На этой карте есть маркеры, ломаная линия и круг.

Я использую PDFKit и wkhtmltopdf 0.12.5 (with patched qt).

Проблема в том, что она не рендерится.Он просто показывает "+", "-", "Leaflet", а все остальное пусто.

Я уже попробовал несколько альтернатив:

Подход: python-pdfkit convertвеб-страница (сгенерированная JS) в PDF

wkhtmltopdf и листовка ждут карту

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

Ни один из них не сработал.iframe Я думал, что будет какое-то решение, но оно не рендерится.Альтернатива javascript-delay, тоже не сработала.

Мой взгляд: 

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

Мой HTML-шаблон: 

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

wkhtmltopdf не работаетдать любую ошибку или предупреждение о JS листовки и его CSS.

Я пробовал много комбинаций ссылок выше, а также с других сайтов.

Может кто-нибудь выяснить проблему

...