Search code examples
pythondjangopdfpdf-generationxhtml2pdf

Position absolute for <img/> when using xhtml2pdf (Django)?

Can I generate PDF with CSS position: absolute; for <img src="..."/> html tag?

I need to place handwritten signature and company stamp (PNG files) to bottom of order voucher at non standard place, that they run a little on the goods table. Position absolute will save my time for that, but it's don't working.

EDIT:

I have an answer from xhtml2pdf GitHub repo:

Well absolute position is not supported right now, but if you are looking for how to set images in specific part of page in all pages, see frames.

So, my question is still actual. Real usage example with xhtml2pdf frames for images will be great.

Solution

  • And real usage example from Luis Zárate (xhtml2pdf collaborator):

    <html>
<head>
<style>
    @page {
        size: a4 portrait;
        @frame content_frame {          /* Content Frame */
            left: 50pt; width: 512pt; top: 90pt; height: 632pt;
        }
        @frame footer_frame {           /* Another static Frame */
            -pdf-frame-content: footer_content;
            left: 450pt; width: 300pt; top: 672pt; height: 200pt;
        }
    }
</style>
</head>

<body>
    <!-- Content for Static Frame 'footer_frame' -->
    <div id="footer_content">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/123px-Tux.svg.png?download">
    </div>

    {% lorem 10 p %} 
    <pdf:pdf-next-page />
    {% lorem 10 p %}
</body>
</html>

    Code generates this PDF file: https://github.com/xhtml2pdf/xhtml2pdf/files/1754033/report-7.pdf