使用 javascript 渲染 <h1> 元素放置错误位置的 html2pdf 问题

Question

我正在做这个项目，我想做一个 pdf 导出。问题可能出在缩放上，我真的需要帮助。

下面是来自 html 的图片和 问题。 在 html 图片上你可以看到它是如何组织的并且看起来很漂亮但是当 html2pdf 渲染它并设置它自己的比例它变得不可读和非颗粒化。

JS函数：

     function pdf() {
      
       var element = document.getElementById('hello');
        var opt = {
          margin:       1,
          filename:     'myfile.pdf',
          image:        { type: 'jpeg', quality: 0.98 },
          html2canvas:  { scale: 2 },
          jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
        }; html2pdf().set(opt).from(element).save(); }

我需要它的 a4 格式并且它不会产生以下这些问题：

html的样子：

html site

出现的问题：

"Pregdled" cant be seen from html site

怎么办？

Answer 1

我解决了问题。

解释：

当 html2pdf 正在呈现 html 网站时，最好的呈现方式是 将宽度设置为百分比 (%)

例如：

在我的例子中

Pregled

有 css width: 80vw; 所以我把它改成了 width: 100%;

希望有人觉得这有用:)

使用 javascript 渲染 <h1> 元素放置错误位置的 html2pdf 问题

Problem with html2pdf using javascript rendering <h1> elements putting on wrong place

html

javascript

css

pdf

html2pdf

Pregled