vue3-html2pdf 生成空白pdf

Question

这会为我生成空白pdf：

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

功能：

 <img
  :style="{ cursor: 'pointer' }"
   src="../assets/images/download-arrow.png"
   alt="&laquo;"
   @click="generatePDF()"
 />

  generatePDF() {
      this.$refs.html2Pdf.generatePdf();
    },

请尽快帮助我。我有严格的期限。我会尝试所有可能的解决方案，任何人都可以帮助我。

Answer 1

我也尝试这个库。而且，使用 vue3 我也有一个空白页面......

经过一番搜索，我找到了这个解决方案：

<VueHtml2pdf
        :show-layout="false"
        :float-layout="true"
        :enable-download="false"
        :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"
      >
        <template  v-slot:pdf-content>
          <p>your content here</p>
        </template>
</VueHtml2pdf>        

您可以查看 vue 文档以获取有关插槽的更多信息 https://vuejs.org/guide/components/slots.html#scoped-slots

Answer 2

我在你的消息之后尝试这个库。而且，使用 vue3 我也有空白页面......

经过几个小时的工作后，我直接尝试了 html2pdf.js （你的库只是 vuejs 的一个分支），它与 vuejs 3 完美配合；）

 - doc canvas options : https://html2canvas.hertzen.com/configuration
 - doc jspdf options : https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html
 - doc html2pdf.js : https://ekoopmans.github.io/html2pdf.js/

 - doc canvas options : https://html2canvas.hertzen.com/configuration
 - doc jspdf options : https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html
 - doc html2pdf.js : https://ekoopmans.github.io/html2pdf.js/

    generateReport () {
      html2pdf(this.$refs.document, {
        margin: 0.2,
        filename: this.options.title + ".pdf",
        pagebreak:  { after: '.sautDePage' },
        image: { 
          type: "jpeg", 
          quality: 2
        },
        html2canvas: { 
          scale: 2, 
          letterRendering: true
        },
        jsPDF: { 
          unit: "in", 
          format: "a4", 
          orientation: "portrait"
        },
      });
    }

格！