Question

我正在使用html2pdf Python库从HTML页面创建PDF。我使用Google Map Static Image API生成PDF格式的动态图像，并且动态生成锚标记的href链接。

以下是HTML中的代码：

<a target="_blank" href="http://maps.google.com/?q={{ direction_data.address }}">
<img class="img-responsive" style="cursor: pointer;" self.location src="https://maps.googleapis.com/maps/api/staticmap?center={{ latlng }}&zoom=16&size=385x510&maptype=roadmap&key=my_API_KEY&markers=color:red%7Clabel:M%7C{{ lat }},{{ lng }}&&q=%7C{{ lat }},{{ lng }}"/>
</a>

现在此代码转到PDF但它没有在图像上显示任何链接。如何使用html2pdf将文档链接放在PDF中？

由我编辑1代码：

以下是views.py代码：

#below view will fetch resources like images
def fetch_resources(uri, rel):
    path = os.path.join(settings.MEDIA_ROOT, uri.replace(settings.MEDIA_URL, ""))
    return path

# main pdf generation code view as below
def render_to_pdf(template_src, context_dict):
    template = get_template(template_src)
    context = Context(context_dict)
    html = template.render(context)
    result = StringIO.StringIO()
    pdf = pisa.pisaDocument(StringIO.StringIO(html.encode("UTF-8")), result ,callback=fetch_resources)
# , file("map_pdf.pdf","wb")
    if not pdf.err:
        return HttpResponse(result.getvalue(), content_type='application/pdf')
    return HttpResponse('We had some errors<pre>%s</pre>' % escape(html))

def google_pdfmap(request,id,id1):
    # here I have done database queries to get all data
    # and then sent them over above view method
    template= "pdf_view_page.html"
    return render_to_pdf(
            template,
            {'pagesize': 'A4 landscape',
            'direction_data':direction_data,
            'contact_data': contact_data,
            'day_data': day_data,
            'latlng' : latlng,
            'lat': lat,
            'lng' : lng,
            })

========= pdf_view_page.html页面下方==========

<html>
<head>
        <style type="text/css">
            @page {
                size: {{ pagesize }} !important;
                margin-left : 10px;
                margin-top : 10px;
                margin-bottom : 10px;
                margin-right : 5px;
            }
        </style>
</head>
<body>
    <a target="_blank" href="http://maps.google.com/?q={{ direction_data.address }}">
    <img class="img-responsive" style="cursor: pointer;" self.location src="https://maps.googleapis.com/maps/api/staticmap?center={{ latlng }}&zoom=16&size=385x510&maptype=roadmap&key=my_API_KEY&markers=color:red%7Clabel:M%7C{{ lat }},{{ lng }}&&q=%7C{{ lat }},{{ lng }}"/>
    </a>
</body>
</html>

Answer 1

我花了一些时间，但后来我找到了这个解决方案，它对我有用。

只需将此属性放在img标记内。

style="cursor: pointer" onclick="javascript:self.location='http://maps.google.com/?q={{ direction_data.address }}'"

使用html2pdf库链接PDF格式的图像

1 个答案: