如何在 vue 3 js 中使用 html2 pdf 从 html 制作 pdf 文件？

Question

我正在尝试使用 html2pdf 将我的 html 转换为 .pdf。当它是一个简单的文件组件时，我没有任何问题，其中 html 和 <template> 中的 <button> 并且所有方法都在该文件中，如下所示：

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

问题是，上面的解决方案在 DOM 中使用了 space。所以一切对用户都是可见的，这是我想避免的。此外，父子关系是不行的（就像我将按钮导出到父组件），因为仍然可以看到整个 html。如果我使用 v-if 或 v-show，那么我会得到一个空白的 pdf 文件。

问题：

如何在用户看不到 html 的情况下制作 pdf 文件？
想从不同的组件中获取信息 (html) 并将它们合并到一个 pdf 文件中。这怎么可能？

Answer 1

我运行遇到了与 Angular 很久以前的类似问题。我所观察到的

如何在用户看不到 html 的情况下制作 pdf 文件？

这是不可能的，因为 html2pdf 使用 canvas，它是由 html2pdf 即时创建的。

想从不同的组件中获取信息 (html) 并将它们合并到一个 pdf 文件中。这怎么可能？

html2pdf功能非常有限，没有我们需要的丰富。这也不行。

用了一个星期后，我换成JSpdf，完全可以完成这些功能。

一次性设置，一旦您创建格式和模板，它将变得更加简单和灵活。

如何在 vue 3 js 中使用 html2 pdf 从 html 制作 pdf 文件？

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

javascript

html2pdf

vue.js

vuejs3