js 怎么生成pdf

JS生成PDF的方法包括使用第三方库如jsPDF、PDFKit、生成HTML内容并将其转换为PDF、使用服务器端生成PDF等。以下将详细介绍使用jsPDF库进行PDF生成的方法。

jsPDF库是一个非常流行的JavaScript库，它允许开发人员在客户端生成PDF文件。这个库非常适用于需要在网页上生成PDF的应用场景。使用jsPDF，您可以轻松创建复杂的PDF文档，包括文本、图像、表格等内容。

一、导入jsPDF库

在使用jsPDF之前，您需要将jsPDF库导入到您的项目中。您可以通过CDN或npm安装来实现。

1、使用CDN导入

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>

2、通过npm安装

npm install jspdf

二、创建PDF文档

在导入jsPDF库后，您可以开始创建PDF文档。以下是一个简单的示例，展示如何使用jsPDF生成一个包含文本的PDF文件。

1、初始化jsPDF对象

const { jsPDF } = window.jspdf;
const doc = new jsPDF();

2、添加文本内容

doc.text("Hello world!", 10, 10);

3、保存PDF文件

doc.save("sample.pdf");

三、添加图像和其他内容

除了文本，jsPDF还支持添加图像、表格和其他复杂内容。以下是一些示例代码。

1、添加图像

const imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/4QAiRXhpZgAATU0AKgAAAAgABgEAAAMAAAABAAEA...'; // Base64格式的图像数据
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

2、添加表格

const headers = [["ID", "Name", "Country"]];
const data = [
    [1, "Shaw", "Tanzania"],
    [2, "Nelson", "Kazakhstan"],
    [3, "Garcia", "Madagascar"]
];
doc.autoTable({
    head: headers,
    body: data
});

四、生成复杂的PDF文档

有时，您可能需要生成更复杂的PDF文档，例如包含多页内容、不同的字体样式等。以下是一些示例代码，展示如何实现这些功能。

1、添加多页内容

doc.text("This is the first page", 10, 10);
doc.addPage();
doc.text("This is the second page", 10, 10);

2、使用不同的字体样式

doc.setFont("times");
doc.setFontType("italic");
doc.text("This is italic text", 10, 20);
doc.setFontType("bold");
doc.text("This is bold text", 10, 30);

五、示例项目：生成包含文本、图像和表格的PDF

以下是一个完整的示例项目，展示如何使用jsPDF生成一个包含文本、图像和表格的PDF文档。

1、HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.13/jspdf.plugin.autotable.min.js"></script>
</head>
<body>
    <button id="generatePDF">Generate PDF</button>
    <script src="script.js"></script>
</body>
</html>

2、JavaScript代码

document.getElementById('generatePDF').addEventListener('click', () => {
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();
    // 添加文本
    doc.text("Hello world!", 10, 10);
    // 添加图像
    const imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/4QAiRXhpZgAATU0AKgAAAAgABgEAAAMAAAABAAEA...'; // Base64格式的图像数据
    doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
    // 添加表格
    const headers = [["ID", "Name", "Country"]];
    const data = [
        [1, "Shaw", "Tanzania"],
        [2, "Nelson", "Kazakhstan"],
        [3, "Garcia", "Madagascar"]
    ];
    doc.autoTable({
        head: headers,
        body: data
    });
    // 保存PDF文件
    doc.save("sample.pdf");
});

六、使用服务器端生成PDF

有时，客户端生成PDF可能会面临性能问题，特别是对于大文档和复杂内容。在这种情况下，您可以选择使用服务器端生成PDF。常见的服务器端PDF生成工具包括：

1、Node.js + PDFKit

npm install pdfkit

const PDFDocument = require('pdfkit');
const fs = require('fs');
const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));
doc.text('Hello world!', 100, 100);
doc.end();

2、Python + ReportLab

pip install reportlab

from reportlab.lib.pagesizes import letter
from reportlab.pdfgen import canvas
c = canvas.Canvas("output.pdf", pagesize=letter)
c.drawString(100, 750, "Hello World")
c.save()

七、结论

通过以上介绍，您可以看到使用jsPDF库在客户端生成PDF文件是非常简单且有效的。对于更复杂的需求，您可以结合使用图像、表格和多页内容。如果遇到性能瓶颈，可以考虑使用服务器端生成PDF。无论哪种方式，都可以帮助您轻松创建专业的PDF文档。