Как отлаживать поведение html2pdf.js (или воспроизводить CSS экспортируемого PDF)? ⇐ CSS

[Anonymous]

Я пытаюсь экспортировать документ PDF с помощью html2pdf.js , а весь текст PDF выравнивается. />
И вот версия PDF:

Все графические элементы находятся в месте, но все тексты находятся в центре. И вот нет способа проверить параметры CSS для распечатанного документа PDF. Итак, на самом деле, я довольно смущаю, как создать воспроизводимый пример и сделать этот вопрос более сфокусированным, потому что я смешал два огромных файла CSS. Одна из отдельных HTML -страниц, которую я пытаюсь распечатать, а второй файл CSS - это глобальный стиль приложения Vue.js . Поэтому я думаю, что здесь есть несколько не правильных наследственности, которые могут сломать стили. Можно ли сохранить элемент DOM и предотвратить удаление его, чтобы иметь возможность проверять стили с помощью инструментов разработчика браузеров? Затронутая вещь только текст. Как это поведение может быть воспроизводимо?

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

テスト２

Black Roots Line-это пограничный и код>, единственный способ пересечь границу, которую я обнаружил,-это изменить высоту линии на более низкое значение, но в этом случае текст будет сжиматься вертикально. Но внутри PDF текст сдвинулся. Как можно воспроизвести это поведение, не изменяя падки и поля Div ? Следует перемещать только текст.
также функционирует для преобразования html в pdf довольно просто:

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

import html2pdf from "html2pdf.js";

...

html2pdf(this.$refs.htmlElement, {
margin: 3,
filename: "output.pdf",
image: { type: 'jpeg', quality: 0.98 },
html2canvas: {
scale: 2,
useCORS: true,
width: 1300,
allowTaint: true,
// I tried to set it to true, but console logs are empty
logging: false
},
jsPDF: {
format: 'A4',
orientation: 'landscape',
unit: 'mm'
},
enableLinks: false
});

Дополнительная информация (2023/04/18)
Мы используем Tailwind в качестве основной библиотеки CSS внутри Vue приложения. После удаления базы @tailwind; (code) из положения текста файла CSS печатается правильно. Но я до сих пор не могу выяснить, какая часть Tailwindcss противоречит моим собственным стилям ...
Дополнительная информация (2023/04/20)
Я обнаружил параметр CSS, который разбивает текстовое выравнивание:
img {
display: block;
}

Если я установил globalally Display: unset; для img элемент PDF Текст печатает правильно.
Однако, если я пытаюсь изменить параметр только для текущей страницы, используя scoped Ключевое слово. Pdf: < /p>

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

window.document.querySelectorAll('img').forEach( el => {
el.remove();
});

Но даже если здесь нет ни одного Img элемент в тексте страницы печатает не правильно. Не могу выяснить, как IMG стиль может повлиять на страницу без IMG элементы ...


Подробнее здесь: https://stackoverflow.com/questions/760 ... ported-pdf