Link 使用 html2pdf 库在 PDF 中的图像上

Question

我正在使用 html2pdf Python 库从 HTML 页面创建 PDF。我已经使用 Google 映射静态图像 API 生成 PDF 中的动态图像，并且锚标记的 href link 是动态生成的。

下面是 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，但未在图像上显示任何 link。如何使用 html2pdf 将 link 放在 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 }}'"

Link 使用 html2pdf 库在 PDF 中的图像上

Link on image in PDF using html2pdf library

python

pdf

django

html2pdf