[英]vueHtml2Pdf download pdf blank page
hello I'm new in vueHtml2Pdf my issues is vueHtml2Pdf generate my page is good but when i ckick button download is download blank page.你好我是 vueHtml2Pdf 的新手,我的问题是 vueHtml2Pdf 生成我的页面很好但是当我点击按钮下载时下载空白页面。
my code generated pdf but the preview modal is blank and the donwload我的代码生成了 pdf 但预览模式为空白并且下载
<template>
<div>
<button @click="downloadPdf">
Print Download
</button>
<vue-html2pdf
ref="html2Pdf"
:show-layout="true"
:float-layout="true"
:enable-download="true"
:preview-modal="true"
filename="hee hee"
:pdf-quality="2"
:paginate-elements-by-height="1400"
:manual-pagination="false"
pdf-format="a4"
pdf-orientation="landscape"
pdf-content-width="800px"
pdf-unit="in"
>
<section slot="pdf-content">
<p> test my pdf</p>
<p> my pdf </p>
</section>
</vue-html2pdf>
</div>
</template>
<script>
import VueHtml2pdf from 'vue-html2pdf';
export default {
components: {
VueHtml2pdf
},
methods: {
async downloadPdf () {
this.$refs.html2Pdf.generatePdf();
}
}
}
</script>
and i have this error in my console我的控制台中有这个错误
Warning: Invalid absolute docBaseUrl: "blob:https://localhost:8080/9c98ebc9-2707-4b30-a504-99ff262f0e01"警告:无效的绝对 docBaseUrl:“blob:https://localhost:8080/9c98ebc9-2707-4b30-a504-99ff262f0e01”
EDIT:编辑:
Add your content inside another <section>
tag.将您的内容添加到另一个
<section>
标记中。
I recently did work with this library, and this is my base component that renders different content (code below).我最近确实使用过这个库,这是我呈现不同内容的基本组件(下面的代码)。
The only real difference I see between our code might be the await
on the function that generates the PDF.我看到我们的代码之间唯一真正的区别可能是生成 PDF 的 function 上的
await
。
Try that, but if it doesn't work, you might try and copy paste my code below and see if it works (Just replace the <slot/>
with whatever you want, and add some boilerplate for the props).尝试一下,但如果它不起作用,您可以尝试复制并粘贴下面的代码,看看它是否有效(只需将
<slot/>
替换为您想要的任何内容,并为道具添加一些样板)。
<template>
<div class="pdf-converter">
<BaseButton
class="mt-auto text-white h-13 bg-blue"
:disabled="disableButton"
@click="$emit('generate-pdf')"
>
{{ buttonText }}
</BaseButton>
<VuePDF
ref="html2pdf"
:show-layout="false"
:float-layout="false"
:enable-download="false"
preview-modal
:paginate-elements-by-height="1400"
pdf-content-width="700px"
:filename="fileName"
:manual-pagination="false"
pdf-format="a4"
:html-to-pdf-options="pdfOptions"
>
<section
slot="pdf-content"
>
<div
v-if="show"
>
<slot />
</div>
</section>
</VuePDF>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import VuePDF from 'vue-html2pdf'
export default {
name: 'BasePdfConverter',
components: { VuePDF },
props: {
disableButton: {
type: Boolean,
default: false
},
buttonText: {
type: String,
default: 'Generate Report'
},
fileName: {
type: String,
default: ''
},
reportToWatch: {
type: String,
default: '',
required: true
}
},
data () {
return {
show: false,
pdfOptions: {
margin: [10, 2, 10, 2], // top, left, buttom, right
image: { type: 'jpeg', quality: 0.98 },
html2canvas: {
scale: 2,
bottom: 20
},
jsPDF: {
unit: 'mm',
orientation: 'portrait'
}
}
}
},
computed: {
...mapGetters(['getLoaderState'])
},
watch: {
'$store.state.ReportsModule.reports': {
handler: async function (newVal) {
if (Object.keys(newVal[this.reportToWatch]).length) {
this.show = true
await this.$refs.html2pdf.generatePdf()
this.show = false
} else {
this.$showAlert({
message: 'No data available for this job',
type: 'error'
})
}
},
deep: true
}
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.