如何在 JavaScript 中生成 PDF

最新推荐文章于 2025-04-05 14:27:48 发布

迹忆客

最新推荐文章于 2025-04-05 14:27:48 发布

阅读量8.3k

点赞数 2

分类专栏：前端 JavaScript 文章标签： javascript pdf 开发语言

本文链接：https://blog.csdn.net/fengqianlang/article/details/131487499

版权

前端同时被 2 个专栏收录

52 篇文章

订阅专栏

JavaScript

36 篇文章

订阅专栏

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