Проблема с соотношением сторон при конвертации JSX в PDF

В моем приложении React у меня есть заполняемый пользовательский интерфейс PDF-формы, созданный вручную с помощью jsx и tailwind. Я использую html2canvas и jsPDF для преобразования его в PDF, а затем загружаю его в gdrive.

Моя первая проблема заключается в том, что при тестировании в Google Chrome вывод, загруженный в gdrive, имеет нецентрированные входные данные, хотя в пользовательском интерфейсе они были центрированы с помощью 'flex items-center' через tailwind

Вторая проблема заключается в том, что масштабирование браузера также влияет на вывод PDF. На сайте, когда вы заполняете форму и пытаетесь уменьшить масштаб страницы, содержимое PDF-формы увеличит свою высоту и выйдет за пределы страницы. Так что вывод, загруженный в gdrive, также будет выглядеть так.

Моя функция для преобразования jsx в pdf выглядит так:

Я уже пытался установить zoom: 100%; zoom: unset; в index.css, чтобы сделать масштаб постоянным. Я также добавил h-[1030px] к элементу div этой страницы, чтобы он не менял высоту содержимого, но это все равно не работает.

const printDocument = async () => {
    const firstPageCanvas = await html2canvas(firstPageRef.current, { scale: 2 });
    const secondPageCanvas = await html2canvas(secondPageRef.current, { scale: 2 });
    // Create a new jsPDF instance
    const pdf = new jsPDF('p', 'mm', 'letter', true);
    const pageWidth = pdf.internal.pageSize.getWidth();
    const pageHeight = pdf.internal.pageSize.getHeight();

    // Convert the canvas image to a data URL
    const firstPageimgData = firstPageCanvas.toDataURL('image/png');
    const secondPageimgData = secondPageCanvas.toDataURL('image/png');

    const imgWidth = firstPageCanvas.width;
    const imgHeight = secondPageCanvas.height;

    const ratio = Math.min(pageWidth / imgWidth, pageHeight / imgHeight);
    const imgX = (pageWidth - imgWidth * ratio) / 2;
    const imgY = 30;

    pdf.addImage(firstPageimgData, 'PNG', imgX, imgY, imgWidth * ratio, imgHeight * ratio); // Adjust dimensions as needed
    // Add the image to the PDF
    pdf.addImage(firstPageimgData, 'PNG', 0, 0, pageWidth, pageHeight); // Adjust dimensions as needed

    // Add a new page
    pdf.addPage();

    // Add another image or content to the new page
    // For demonstration, let's add the same image to the new page
    pdf.addImage(secondPageimgData, 'PNG', 0, 0, pageWidth, pageHeight); // Adjust dimensions as needed

    // Save the PDF
    const pdfBlob = pdf.output('blob'); // Get the PDF content as a Blob
    return pdfBlob;
};