时间戳

首页 > 解决方案 > 如何在 vue3js 中使用 html2pdf 从 html 中制作 pdf 文件？

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

问题描述

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

<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 中占用了空间。所以一切对用户来说都是可见的，我想避免这种情况。此外，父子关系是不可行的（就像我将按钮导出到父组件一样），因为仍然可以看到整个 html。如果我会使用v-ifor v-show，那么我会得到一个空白的 pdf 文件。

问题：

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

标签： javascriptvue.jsvuejs3html2pdf

解决方案

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

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

这是不可能的，因为html2pdf使用的是由 html2pdf 动态创建的画布。

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

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

花了一个星期后，我切换到JSpdf，它非常有能力完成这些功能。

这将是一次设置，一旦您创建了格式和模板，它将变得更容易和更灵活。

推荐阅读