CODEWITHSUNDEEP
javascriptvue.jspdfpdf-generationhtml2pdf
Joyal Shah
Joyal Shah

Reputation: 83

vue3-html2pdf generates blank pdf

this generates blank pdf for me:

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

Please help me as soon as possible. I have a strict deadline. I will try all possible solutions, can anyone help me.

Upvotes: 5

Views: 6146

Answers (2)

ayoub aarab
ayoub aarab

Reputation: 41

I try this library too. And, with vue3 I have a blank page too...

After some search, I find this solution:

<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>

you can check vue docs for more information about slots https://vuejs.org/guide/components/slots.html#scoped-slots

Upvotes: 5

Shoooryuken
Shoooryuken

Reputation: 340

i try this librairy to after your message. And, with vue3 i have blank page too...

After some hour of work, i try html2pdf.js directly (your library is just a fork for vuejs) and it's work perfectly with 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>
...

gl !

Upvotes: 3

Related Questions