How to make a pdf file out of html using html2pdf in vue3js?

Question

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 component 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 component) 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:

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

Abhinav Kumar · Accepted Answer · 2021-07-06 07:34:13Z

2

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

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.

Would like to take information (html) from different components 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.

answered Jul 6, 2021 at 7:34

Abhinav Kumar

3,0741 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Viktor Setervang · Accepted Answer · 2023-05-23 10:12:24Z

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

Collectives™ on Stack Overflow

How to make a pdf file out of html using html2pdf in vue3js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related