how to save page as pdf on mobile, with same viewport resolution as desktop

Viewed 427

I use jspdf in order to save a page on my website as a pdf. On desktop it looks great. On mobile on the other hand, because the proportions are entirely different, the pdf I get is distorted and lack of important items. In short, nothing I can work with. You can see it on my website: https://ohad-shaked-cv.web.app/

The code that is responsible for creating the pdf is this:

html2canvas(document.body)
            .then((canvas) => {
                const imgData = canvas.toDataURL('image/png', 0.75);
                const imgProps = page.getImageProperties(imgData);
                const pdfWidth = page.internal.pageSize.getWidth();
                const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
                page.addImage(imgData, 'png', 0, 15, pdfWidth, pdfHeight,'','FAST');
                page.save('My C.V.pdf');
            });
1 Answers

You can change the viewport before calling html2canvas, then change it back to the value it had before.

document.querySelector('meta[name=viewport]').setAttribute("content", "width=1200");

Check out this issue on github for more information.

Related