Экспорт окна браузера 16-9 в PDF-файл формата А4 с помощью JavaScript ⇐ CSS

[Гость]

Я пытаюсь экспортировать часть своей веб-страницы в PDF. Я использую jsPDF и html2canvas.
Сначала я нахожу необходимый CSS с помощью querySelector, а затем экспортирую его. Проблема в том, что полученный PDF-файл обрезает часть экрана, которая не соответствует формату PDF-файла (см. скриншот для справки).
[img]https://i .stack.imgur.com/RcUlp.png[/img]
Затем я попытался создать закадровый элемент с полным HTML-кодом страницы и изменить его размер до формата PDF A4, но для некоторых причина, по которой это не работает.
Я новичок в реагировании и JavaScript, поэтому любая помощь очень ценится. Спасибо.
Соответствующий код для функции экспорта и элементов html можно найти здесь.

Код: Выделить всё

function exportToPdf() {
// Clone the body element
const bodyClone = document.body.cloneNode(true);

// Create a new off-screen div
const offScreenDiv = document.createElement('div');
offScreenDiv.style.width = '210mm';
offScreenDiv.style.height = '297mm';
offScreenDiv.style.position = 'fixed';
offScreenDiv.style.left = '-10000px';
offScreenDiv.style.top = '-10000px';
offScreenDiv.style.boxSizing = 'border-box';
offScreenDiv.style.pageBreakAfter = 'always';

// Append the cloned body to the off-screen div
offScreenDiv.appendChild(bodyClone);

// Append the off-screen div to the body
document.body.appendChild(offScreenDiv);

// Select the specific element from the cloned body
const input = offScreenDiv.querySelector('.cs-message-list');

if (input) {
const pdf = new jsPDF('p', 'mm', 'a4');
pdf.html(input, {
html2canvas: { scale: 1 },
callback: function (pdf) {
pdf.save("download.pdf");

// Remove the off-screen div after exporting to PDF
document.body.removeChild(offScreenDiv);
},
x: 10,
y: 10
});
} else {
console.log('No element found');
}
}

Источник: https://stackoverflow.com/questions/781 ... javascript