HTML2PDF not creating landscape orientation PDF

I'm trying to create a PDF file in landscape orientation using the html2pdf.js library in a PHP application. My code fetches form responses from a JSON file, generates a HTML string from these responses, and then attempts to convert this HTML string to a PDF file. Despite setting the orientation to 'landscape' in the html2pdf options, the generated PDF file always ends up in portrait orientation. I've tried various ways to fix this issue, but nothing seems to work. Below is the relevant portion of my code:

    function generatePrintReport(indexes) {
// Fetch the JSON file
fetch('responses/form_<?php echo $id; ?>.json')
.then(response => response.json())
.then(data => {
const selectedResponses = indexes.map(index => data[index]);
const printData = formatPrintData(selectedResponses);
// Generate PDF using html2pdf.js library
const element = document.createElement('DIV');
element.innerHTML = printData;
html2pdf()
.from(element)
.set({
width: 279.4,
height: 215.9,
filename: '<?php echo json_encode($form_data['name']); ?>.pdf',
pagebreak: { mode: 'avoid-all' },
margin: [ 0, 10, 10, 10], // Set the margin as needed
})
.save();
})
.catch(error => {
console.error('Error:', error);
alert('Error fetching the responses. Please try again.');
});
}
function formatPrintData(responses) {
let html = '<h3>' + <?php echo json_encode($form_data['name']); ?> + '</h3>';
html += '<p>' + <?php echo json_encode($form_data['description']); ?> + '</p>';
html += '<table border="1">';
html += '<tr><th>#</th>';
// Add table headers
const quesHeaders = <?php echo json_encode($ques_data); ?>;
quesHeaders.forEach(header => {
html += '<th>' + header.ques + '</th>';
});
html += '<th>Verified by</th></tr>';
// Add table rows
responses.forEach(response => {
html += '<tr>';
html += '<td>' + (response.id || '') + '</td>';
Object.keys(response).forEach(key => {
if (key !== 'id') {
html += '<td>' + (response[key] || '') + '</td>';
}
});
html += '<td>' + (response.verified || '') + '</td>';
html += '</tr>';
});
html += '</table>';
html += '<p class="signa">Signature:____________________________________ Date:_____________</p>'
return html;
}

In this function, formatPrintData is a helper function that formats the selected responses into a HTML string.

Is there anything wrong with my code that's causing the generated PDF to be in portrait orientation? I would appreciate any suggestions or help. Thanks!

In your code you have this:

  html2pdf()
.from(element)
.set({
width: 279.4,
height: 215.9,
filename: '<?php echo json_encode($form_data['name']); ?>.pdf',
pagebreak: { mode: 'avoid-all' },
margin: [ 0, 10, 10, 10], // Set the margin as needed
})
.save();

Width and height are not options that are set by using the .set() call on the html2pdf.js worker. The html2pdf.js api is for you to pass options to html2canvas and jsPDF, which are used under the hood. You can read about the jsPDF properties and then set them like this:

  html2pdf()
.from(element)
.set({
filename: '<?php echo json_encode($form_data['name']); ?>.pdf',
pagebreak: { mode: 'avoid-all' },
margin: [ 0, 10, 10, 10], // Set the margin as needed,
jsPDF: {
unit: "px",
format: [215.9, 279.4],
orientation: "landscape",
hotfixes: ["px_scaling"]
}
})
.save();

By the way, html2pdf.js has not been updated in ~2 years and has accumulated some bug reports and pull requests, you may prefer html3pdf which is almost the same (should not require any changes to your code) but with some improvements.