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

Answer 2

我试着用这个库来跟踪你的消息。而且，对于vue3，我也有空白页。。。

经过一个小时的工作，我直接尝试了html2pdf.js(你的库只是vuejs的一个分支(，它可以完美地与vuejs3；(

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