如何在 JavaScript 中生成 PDF

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

如何在 JavaScript 中生成 PDF

作者：迹忆客最近更新：2023/06/05 浏览次数：

在本文中，我们将学习在 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

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

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

使用 html2pdf 库在 JavaScript 中生成 PDF

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

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

基本语法：

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

如上所示，我们通过 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>

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

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

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

上一篇：在 JavaScript 中使用种子生成随机数

下一篇：JavaScript 中 URL 解码

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享