I am trying to convert my html into .pdf with the use of html2pdf. I have no problems when it is a simple one file ponent with html and a <button> inside <template> and all the methods are inside this file, like below:

<template>
    <div ref="pdf">
        Hello, this is my awesome html converted into pdf
    </div>
    <button @click="generatePDF">
        make PDF
    </button>
</template>
<script>
import html2pdf from "html2pdf.js"
export default {
    methods: {
        generatePDF() {
            const doc = this.$refs.pdf
            html2pdf(doc)
        },
    },
}
</script>
<style></style>

The problem is, that the solution above takes space in the DOM. So everything is visible to the user, which I would like to avoid. Also, a parent-child relationship is a no-go (like I export the button to a parent ponent) because the whole html can still be seen. If I would use v-if or v-show, then I get a blank pdf file.

Questions:

1. How can I make a pdf file while the html is not seen by the user?
2. Would like to take information (html) from different ponents and merge them into one pdf file. How is this possible?

I am trying to convert my html into .pdf with the use of html2pdf. I have no problems when it is a simple one file ponent with html and a <button> inside <template> and all the methods are inside this file, like below:

<template>
    <div ref="pdf">
        Hello, this is my awesome html converted into pdf
    </div>
    <button @click="generatePDF">
        make PDF
    </button>
</template>
<script>
import html2pdf from "html2pdf.js"
export default {
    methods: {
        generatePDF() {
            const doc = this.$refs.pdf
            html2pdf(doc)
        },
    },
}
</script>
<style></style>

The problem is, that the solution above takes space in the DOM. So everything is visible to the user, which I would like to avoid. Also, a parent-child relationship is a no-go (like I export the button to a parent ponent) because the whole html can still be seen. If I would use v-if or v-show, then I get a blank pdf file.

Questions:

1. How can I make a pdf file while the html is not seen by the user?
2. Would like to take information (html) from different ponents and merge them into one pdf file. How is this possible?

• javascript
• vue.js
• vuejs3
• html2pdf

Share Improve this question Follow edited Jul 6, 2021 at 9:29 Dariusz Legizynski asked Jul 6, 2021 at 7:17 Dariusz LegizynskiDariusz Legizynski 39888 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I ran into similar issue with Angular long time back. What I have observe

1. How can I make a pdf file while the html is not seen by the user?

This can not be possible, because html2pdf uses canvas, that is created by html2pdf on the fly.

2. Would like to take information (html) from different ponents and merge them into one pdf file. How is this possible?

html2pdf is very limited in functionality, it is not rich as we need. This also doesn't possible.

After spending a week, I switched to JSpdf, that is much capable of doing these functionality.

It will be one time setup, once you create the format and template, it will be easy and more flexible.

This is how I solved downloading a PDF with html2pdf without showing the HTML to the user.

I'm using tailwind so the css classes might not make sense for you.

The short explanation is that I'm wrapping the PDF inside a teleport and then a div with display: absolute, z-index: -1 to hide it from the user.

<script setup lang="ts">
import { onMounted } from 'vue';
import html2pdf from 'html2pdf.js';

onMounted(() => {
    // I've not fine tuned these values.
    setTimeout(() => exportToPDF(), 1000)
    // close will unmount this ponent
    setTimeout(() => emit('close'), 1500)
})

function exportToPDF() {
    html2pdf(document.getElementById('pdf'), {
        filename: 'myFilename.pdf',
    });
}
</script>


<template>
    <teleport :to="'#modal-target'">
        <div class=" absolute">
            <div id="pdf" class="w-[803px]">
              PDF CONTENT
            </div>
        </div>
    </teleport>
 </template>