esto genera pdf en blanco para mí:
<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>Función:
<img :style="{ cursor: 'pointer' }" src="../assets/images/download-arrow.png" alt="«" @click="generatePDF()" /> generatePDF() { this.$refs.html2Pdf.generatePdf(); },Por favor, ayúdame tan pronto como sea posible. Tengo un plazo estricto. Probaré todas las soluciones posibles, alguien puede ayudarme.
Intento esta biblioteca también. Y, con vue3 también tengo una página en blanco...
Después de buscar un poco, encontré esta solución:
<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>puede consultar los documentos de vue para obtener más información sobre las tragamonedas https://vuejs.org/guide/components/slots.html#scoped-slots
Intento esta biblioteca después de tu mensaje. Y, con vue3 también tengo una página en blanco...
Después de una hora de trabajo, pruebo html2pdf.js directamente (su biblioteca es solo una bifurcación para vuejs) y funciona perfectamente con 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> ...g!