3

Is there any way to rotate entire document or a page using jsPDF? I am looking for something like:

var doc = new jsPDF('p', 'mm', [137, 66]);
// Add content...
doc.rotate(90); // <---- Something like this
doc.save('test.pdf');
  • 2
    I have not found an answer right to "document/page rotation" question, but I managed to achieve what I wanted. Basically when I add an image, I just use 9 argument to set rotation. `doc.addImage( img, 'png', x y, height, width, null, null, -90 // <--- Here we are );` – Oleksandr Tserkovnyi Aug 29 '17 at 18:02

1 Answers1

1

I had a project needs to export images from url as a full page pdf. In this case, you can't simply do doc.addImage( img, 'png', x y, height, width, null, null, -90), as the image will go out of bounds. See this stackoverflow answer for details. You'll need to calculate the aspect ratio of the image and relative width/height ratio of the page to reset the x y, width, height. Here is the code I used to achieve that.

function exportPdf(urls) {
    let pdf = new jsPDF('l', 'mm', 'a4');
    const pageWidth = pdf.internal.pageSize.getWidth();
    const pageHeight = pdf.internal.pageSize.getHeight();
    const pageRatio = pageWidth / pageHeight;

    for (let i = 0; i < urls.length; i++) {
        let img = new Image();
        img.src = urls[i];
        img.onload = function () {
            const imgWidth = this.width;
            const imgHeight = this.height;
            const imgRatio = imgWidth / imgHeight;
            if (i > 0) { pdf.addPage(); }
            pdf.setPage(i + 1);
            if (imgRatio >= 1) {
                const wc = imgWidth / pageWidth;
                if (imgRatio >= pageRatio) {
                    pdf.addImage(img, 'JPEG', 0, (pageHeight - imgHeight / wc) / 2, pageWidth, imgHeight / wc, null, 'NONE');
                }
                else {
                    const pi = pageRatio / imgRatio;
                    pdf.addImage(img, 'JPEG', (pageWidth - pageWidth / pi) / 2, 0, pageWidth / pi, (imgHeight / pi) / wc, null, 'NONE');
                }
            }
            else {
                const wc = imgWidth / pageHeight;
                if (1 / imgRatio > pageRatio) {
                    const ip = (1 / imgRatio) / pageRatio;
                    const margin = (pageHeight - ((imgHeight / ip) / wc)) / 4; // why not 2?
                    pdf.addImage(img, 'JPEG', (pageWidth - (imgHeight / ip) / wc) / 2, -(((imgHeight / ip) / wc) + margin), pageHeight / ip, (imgHeight / ip) / wc, null, 'NONE', -90);
                }
                else {

                    pdf.addImage(img, 'JPEG', (pageWidth - imgHeight / wc) / 2, -(imgHeight / wc), pageHeight, imgHeight / wc, null, 'NONE', -90);
                }
            }
            if (i == urls.length - 1) {
                pdf.save('Photo.pdf');
            }
        }
    }
}
Weihui Guo
  • 3,669
  • 5
  • 34
  • 56
  • I tried your solution it works good, but the image in the 90 rotation mode appeared in Center of the pdf. Is there a way we can start populating image from right side – Vipin Yadav Nov 06 '19 at 05:23
  • I would like the image to be in the center of the page. But if you want to start from the right hand side, you may re-do the math yourself. The principle should be the same I think. – Weihui Guo Nov 06 '19 at 12:49