Pagedjs-cli not creating mixed orientation pdf from the html

[yogeshkashid2010]

For below example pagedjs creating pdf in potrait mode only.

Here is a step-by-step example which I tried to create a PDF with mixed orientation (portrait and landscape) using Paged.js CLI.

Prerequisites

Ensure you have:

Node.js installed

Paged.js CLI installed using:

npm install -g pagedjs-cli

---

File Structure

Create the following structure:

📁 mixed-layout-example
├── index.html
├── styles.css
├── toc-script.js
├── images/
│ ├── banner.jpg
│ ├── header.png
│ └── footer.png
└── output.pdf

---

1. index.html
   "

<title>Mixed Layout PDF</title> <script src="toc-script.js" defer></script>

Table of Contents

Portrait Page Example

This is a sample portrait page with standard content layout.

Landscape Page Example

This is a sample landscape page, suitable for tables and wide content.

Column 1	Column 2	Column 3
Data 1	Data 2	Data 3

Thank you for viewing this PDF example!

"

---

2. styles.css
   "@page {
   size: A4 portrait;
   margin: 20mm;
   @bottom-center {
   content: "Page " counter(page) " of " counter(pages);
   }
   }

@page landscape {
size: A4 landscape;
margin: 15mm;
}

.banner img {
width: 100%;
height: auto;
margin-bottom: 20px;
}

/* Table of Contents */
.toc h1 {
text-align: center;
font-size: 24px;
}

#toc-content {
margin-top: 20px;
}

/* Portrait Section */
.portrait-page {
page-break-before: always;
}

/* Landscape Section */
.landscape-page {
page: landscape;
page-break-before: always;
}

/* Footer Section */
.footer {
margin-top: 40px;
font-size: 14px;
text-align: center;
}"

---

3. toc-script.js

This script will generate a Table of Contents dynamically.
"
document.addEventListener("DOMContentLoaded", () => {
const tocContent = document.getElementById("toc-content");
const sections = document.querySelectorAll("section");

sections.forEach((section, index) => {
if (!section.classList.contains("banner") && !section.classList.contains("toc")) {
const title = section.querySelector("h1").innerText || Section ${index + 1};
const tocItem = document.createElement("p");
tocItem.textContent = ${title};
tocContent.appendChild(tocItem);
}
});
});
"

---

4. Generate PDF using Paged.js CLI

Run the following command to generate the PDF:

pagedjs-cli index.html -o output.pdf

---

5. Result supposed to be

The PDF will have the first page with a banner image.

The second page will be the Table of Contents (TOC).

The third page will display a portrait layout with standard text.

The fourth page will use a landscape layout with a table.

The last page will have a footer.

But problem with above example is that it only creates pdf in potrait.

Let me know if you'd like any more details.