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>

Function：

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

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

請盡快幫助我。 我有一個嚴格的期限。 我會嘗試所有可能的解決方案，任何人都可以幫助我。

Answer 1

我在收到您的消息后嘗試使用此圖書館。 而且，使用 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/

    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"
        },
      });
    }

<section class="pdf-content  q-pa-md bg-white" ref="document">
          <section class="pdf-item" style="background-image: url('fixture/bg.PNG'); background-repeat: no-repeat; background-position: 50% 0; background-size: cover;">
            <h4 style="font-family: cursive;" class="text-primary">Dolore culpa eiusmod aute labore labore eu nulla.</h4>
            <span>Lorem Lorem incididunt qui in aute aliquip incididunt anim veniam in reprehenderit eiusmod qui minim. Do officia elit duis culpa non excepteur. Ut quis reprehenderit cupidatat exercitation.</span>
            <br>
            <br>
            <img src="fixture/unicorn.png" />

            <div class="sautDePage"></div>
            <h2 style="background: white">HTML Table</h2>
...

格！

Answer 2

我也試試這個圖書館。 而且，對於 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