如何在 JavaScript 中生成 PDF_jspdf

作者：凡人多烦事01 | 2024-04-21 13:07:38

踩

jspdf

在本文中，我们将学习在 JavaScript 源代码中创建 PDF 的最佳库，以及如何在我们的 JavaScript 代码中使用该库。

在 JavaScript 中生成 PDF

我们经常在网页上看到文件下载选项，例如 PDF。开发人员必须使用程序代码生成 PDF 文件才能向用户提供此功能。

我们可以在 JavaScript 中使用多个库来创建 PDF 文件。例如，许多网站提供生成和下载发票、门票、简历等文件的功能。

这些网站使用不同的库来执行此功能。我们将借助示例讨论和学习两个最常用的库。

使用 jsPDF 库在 JavaScript 中生成 PDF

仅对于 JavaScript，我们有 npm 库包 jsPDF 来创建 PDF。使用此库时不需要服务器端脚本。

我们可以通过处理动态内容生成PDF文件。只需 3 行代码即可快速简单地生成 PDF 文件，如下所示。

基本语法：

var myDoc = new jsPDF(); //object
myDoc.text(10, 10, 'Jiyik Website!'); //content
myDoc.save('dummyFile.pdf'); //saving
1
2
3

我们需要使用 new 关键字和 jsPDF() 创建一个对象并将其存储在一个变量中。然后，我们必须将内容设置为具有对象文本属性的字符串。

最后，我们使用 save 属性保存 PDF 文件。

使用 html2pdf 库在 JavaScript 中生成 PDF

html2pdf 库允许我们使用 JavaScript 源代码将其嵌入到我们的网站中，并将网页内容转换为 PDF 文档。 PDF 文档将以 PDF 格式下载。

只需下载库并将其导入我们的源代码，然后再使用它。

基本语法：

const docElement = document.getElementById('ticket');
html2pdf().from(docElement).save();
1
2

如上所示，我们通过 document.getElementById() 获取元素内容并使用 html2pdf().from(docElement).save() 我们可以将内容转换为 PDF 并下载文件。

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>HTML to PDF conversion</title>
        <script src="html2pdf.bundle.min.js"></script>

        <script>
            function createPDF() {
                // get the element of ticket content.
                const docElement = document.getElementById('ticket');
                // select the element and save as the PDF.
                html2pdf().from(docElement).save();
            }
        </script>
    </head>
    <body>
    <h1 style="color:blueviolet">Jiyik Learning</h1>
    <h3>JavaScript create and download pdf</h3>

        <div id="ticket">
            <h1>Our Ticket</h1>
            <p>Ticket content here</p>
        </div>
        <button onclick="createPDF()">Download as PDF</button>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在上面的 HTML 源代码示例中，我们已经下载了 html2pdf 库，并在 <head> 标签中导入。我们为 ticket 创建了一个 div 元素，为其定义了 id ticket，并为 HTML 的 div 元素提供了虚拟内容。

然后，在该按钮的单击事件上有一个按钮元素 Download as PDF；我们调用了函数 createPDF()。在该函数内部，首先，我们通过使用 document.getElementById('ticket') 获取元素并将其存储在变量中。

最后我们使用了 html2pdf 库方法 from() 和 save()。我们只需要将元素作为参数传递给 from() 方法并调用 save() 方法。

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/463175