vueHtml2Pdf download pdf blank page

Question

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.

my code generated pdf but the preview modal is blank and the donwload

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

Answer 1

EDIT:

Add your content inside another <section> tag.

---

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.

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

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