如何在vue3js中使用html2pdf从html中制作pdf文件？

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:

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?

Answer 1

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