为什么第一页在使用内部使用 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元素，应该会为您修复它。