vuehtml2pdf 中的第一頁空白

Question

vuehtml2pdf 生成 pdf 但僅當我的內容太多時第一頁才為空白，它確實中斷到第二頁但第一頁留空。

<client-only>
      <vue-html2pdf
        ref="html2pdf"
        pdf-format="a4"
        :show-layout="false"
        :preview-modal="false"
        :enable-download="false"
        :manual-pagination="false"
        @progress="onProgress($event)"
        :pdf-quality="2"
        :paginate-elements-by-height="10"
        :filename="user.fullName + 'resume'"
        @beforeDownload="beforeDownload($event)"
        :html-to-pdf-options="{
          filename: user.fullName + ' Resume',
          jsPDF: {
            format: 'a4',
            unit: 'mm'
          },
          html2canvas: {
            useCORS: true,
            dpi: 192,
            letterRendering: true,
            scale: 4, // resolution
          },
       }">
       <section slot="pdf-content">
        <section>
          <component :is="resumeComponent"></component>
        </section>
       </section>
      </vue-html2pdf>

這是我的代碼，我的組件是動態的，它可能有很多頁數據，也可能只有一頁。 但是當數據太多時，首先會生成一個空頁。

Answer 1

您的paginate-elements-by-height值非常低

該數字以像素為單位。 試試 1000，而不是 10。

當該值非常低時，它會產生您看到的行為：

它似乎彈出一個空白頁，然后在每個后續頁面上放置一個項目，對該項目的大小沒有限制（即它不會破壞項目）。

它的算法很可能是：

• 對於每個項目：
• 該項目是否適合當前頁面而不超過paginate-elements-by-height ？
• 如果是這樣，請添加它。
• 如果不是，彈出頁面，並將其添加到下一頁，不管它是否在paginate-elements-by-height的限制內。 （我認為這是必要的，因為如果它在下一頁應用該限制，那么超大項目將導致無限數量的頁面被彈出。）