CODEWITHSUNDEEP
javascriptvue.jsvuejs3html2pdf
Dariusz Legizynski
Dariusz Legizynski

Reputation: 386

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

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:

  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 components and merge them into one pdf file. How is this possible?

Upvotes: 0

Views: 8002

Answers (2)

Viktor Setervang
Viktor Setervang

Reputation: 11

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>

Upvotes: 1

Abhinav Kumar
Abhinav Kumar

Reputation: 3036

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.

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

Upvotes: 2

Related Questions