How to convert webpage to pdf with external image links used

Question

I have gone through many Q's , links on how to convert webpage to pdf , but didn't understood how to get images in pdf

I learnt that images converting to DataURL , then it will be rendered

But how to convert all the images of web page and render to PDF ?

After surfing , I am using libraries to do this are

jsPDF
html2canvas

my sample code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
</head>
<body>
    <div id="canvas">
        <div>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, soluta.</p> 
        </div>
        <div style="color: aqua;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, soluta.</p> 
        </div>
        <div>
            <img src="https://images.unsplash.com/photo-1603350942002-35f088445d3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" width="50px" height="50px" alt="">
        </div>
        <div style="padding: 10px;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, soluta.</p> 
        </div>
        <div>
            <img src="https://images.unsplash.com/photo-1593643946890-b5b85ade6451?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1229&q=80" width="50px" height="50px" alt="">
        </div>
    </div>

    <br>
    <br>
    
    <button onclick="generatePDF()">Generate PDF</button>

    <script>
        function generatePDF() {
        var element = document.getElementById('canvas');
        
        html2canvas(element, {
            onrendered: function(canvas) {
            canvas.getContext('2d');        
            var imgData = canvas.toDataURL("image/png", 1.0);
            var pdf = new jsPDF('p', 'pt', 'a4');
            pdf.addImage(imgData, 'JPG', 15, 40, 180, 160);
            pdf.save("HTML-Document.pdf");
        }
        });          
    }
    </script>
</body>
</html>

I have used inline styles and multiple div's to replicate original

I have tried above code but images are not rendered , I'm pleased to know on converting all images to DataURL and render .

May i know how to get images along with styles and content to pdf , please help me on this , Thanks

Are you trying to convert render a HTML file into a PDF document, or capture a PDF document of a hosted website? — MunkyJunky, Oct 23 '20 at 08:42
Is the aim to have a "Generate PDF" button on the page for the user, or is that just being used for your testing? — MunkyJunky, Oct 23 '20 at 08:46
on click of button , the whole page content is converted to pdf , check clicking it , but the images are not displayed here is my concern — Sophie, Oct 23 '20 at 08:54
Convert all the images to base64 before calling generatePDF function. https://stackoverflow.com/questions/22172604/convert-image-url-to-base64 — Nobal Mohan, Oct 23 '20 at 08:54
@NobalMohan so should i call the function in SO link , may i lnow how could i approach — Sophie, Oct 23 '20 at 08:57
@Sophie Check this answer https://stackoverflow.com/a/49058386/1004972 — Nobal Mohan, Oct 23 '20 at 09:03

How to convert webpage to pdf with external image links used

0 Answers0