For Yeorgios Laskos

html2canvas & jspdf

by Ludolfyn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

<img class="img" src="https://i.postimg.cc/NfMXcB4c/Screenshot-2020-06-09-at-18-35-56.png">
<img class="img" src="https://i.postimg.cc/NfMXcB4c/Screenshot-2020-06-09-at-18-35-56.png">

<a href="#" style="display: block">Download PDF</a>

JavaScript

const imgs = [...document.querySelectorAll('.img')]
const btn = document.querySelector('a')

btn.addEventListener('click', () => {
    const doc = new jsPDF()
    let dataUrl
    async function makeImg(img) {
        let blob = await fetch(img.src).then(res => res.blob());
        dataUrl = await new Promise(resolve => {
            let reader = new FileReader();
            reader.onload = () => resolve(reader.result);
            reader.readAsDataURL(blob);
        })
    }
    imgs.forEach((a, i) => {
        makeImg(a)
        .then(res => {
            doc.addImage(dataUrl, 'PNG', 45, 45, a.style.width, a.style.height)
            if (imgs.length > (i+1)) {
                doc.addPage()
            }
        })
        .then(() => {
            if ((i+1) === imgs.length) {
                doc.save('MyPdf.pdf')
            }
        })
    })
})