為什么第一頁在使用內部使用 html2pdf.js 的 vue-html2pdf 打印時留空

Question

嗨，我遇到了使用名為vue-html2pdf vue 組件進行打印的問題

問題如下：

1. 添加內容時分頁不會中斷頁面。 在打印頁面上變為 3
2. 單擊下載時第一頁打印為空白

這是我用於打印的設置：

<vue-html2pdf
  :show-layout="false"
  :float-layout="true"
  :enable-download="true"
  :preview-modal="true"
  :paginate-elements-by-height="1400"
  filename="nightprogrammerpdf"
  :pdf-quality="2"
  :manual-pagination="false"
  pdf-format="a4"
  :pdf-margin="10"
  pdf-orientation="portrait"
  pdf-content-width="800px"
  @progress="onProgress($event)"
  ref="html2Pdf"
>

這是一個演示： https://codesandbox.io/s/vue-html-to-pdf-example-forked-3lijbr?file=/src/App.vue:95-532

Answer 1

在玩了你的codesandbox之后，我找到了解決方案：刪除部分，然后第一個空白頁消失了。

<!-- 
<section slot="pdf-content">
  <ContentToPrint />
</section>
-->
<ContentToPrint slot="pdf-content" />

但是新的 pdf 的分頁看起來仍然很奇怪，要修復刪除 ContentToPrint 中的問題，比 pdf 對我來說看起來更完美。

<template>
  <div style="margin: 12px 12px">
    <img src="https://picsum.photos/500/300" />
    <!-- <div> -->
    <p>
      <strong
        ><a href="https://www.nightprogrammer.com/" target="_blank"
          >Nightprogrammer.com</a
        ></strong

我猜圖書館不能接受太多的div。

這是我修改過的codesandbox。 如果您打開獨立頁面 ( https://1puw7d.csb.app )，pdf 看起來會更好

https://codesandbox.io/s/vue-html-to-pdf-example-forked-1puw7d?file=/src/App.vue

Answer 2

只需用div替換section元素，應該會為您修復它。