PDFKit渲染空白贴图，而不是树叶贴图
我想从Django视图下载PDF。为此，我有一个由链接触发的函数。PDF将包含一个Leaflet Map。此地图具有标记、多段线和圆。
我使用的是PDFKit和wkhtmltopdf 0.12.5 (with patched qt)。
问题是它不能渲染。它只显示"+"，"-"，"Leaflet“，其余的都是空白的。
我已经尝试了一些替代方案：
Approach: python-pdfkit convert webpage(JS generated) into PDF
wkhtmltopdf and leaflet wait for map
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不会给出任何关于leaflet的JS和它的CSS的错误或警告。
我已经尝试了上述链接的许多组合，也尝试了其他网站的链接。
有人能解决这个问题吗？
回答 1
Stack Overflow用户
发布于 2020-09-22 00:51:42
我也遇到过类似的问题，并最终使其正常工作，但我发现它非常反复无常，不得不大大简化我的HTML/JS代码。
Set L_DISABLE_3D = true;
- Remove
-
L_NO_TOUCH = true;和L_DISABLE_3D = true;
- Remove
L_NO_TOUCH = true;bindTooltip的所有实例(在您的情况下，设置为其他搜索，虽然不适用于您的情况，但我还必须删除<meta name="viewport" />标签以及body和html.
上的所有宽度或高度设置
https://stackoverflow.com/questions/58121652
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号