I am currently exploring the possibility of converting my HTML content into a PDF format using the html2pdf library.
So far, I have successfully achieved this with a simple one-file component where the HTML and a <button> within a <template> tag, along with all methods contained in the same file as shown below:
<template>
<div ref="pdf">
Hello, this is my awesome HTML content converted into a 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>
However, the issue here is that the solution mentioned above occupies space in the DOM, making everything visible to the user, which is something I wish to avoid.
Additionally, establishing a parent-child relationship (such as moving the button to a parent component) doesn't work either, as the entire HTML structure still remains visible. Attempts to use v-if or v-show result in a blank PDF file.
Here are the questions I have:
- How can I generate a PDF file without displaying the HTML content to the user?
- Is it feasible to extract information (HTML) from different components and merge them into a single PDF file? If so, how can this be accomplished?