JS HTML转PDF|极客笔记

JS HTML转PDF

介绍

在 Web 开发中，有时候我们需要将 HTML 页面或者特定内容以 PDF 格式保存或传递。HTML 转 PDF 是一种流行的需求，它可以实现将网页内容转换为可打印的 PDF 文档。

在本文中，我们将探讨如何使用 JavaScript 将 HTML 转为 PDF。我们将介绍几种常用的方法，并提供示例代码和运行结果。

方法一：使用jsPDF库转换

jsPDF 是一个流行的 JavaScript 库，可以帮助我们在客户端将 HTML 转成 PDF。它提供了丰富的 API，可以灵活地定制 PDF 输出。

安装jsPDF库

首先，我们需要下载和引入 jsPDF 库。可以通过以下方式引入：

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

HTML转PDF示例代码

以下是一个使用 jsPDF 将 HTML 转为 PDF 的示例代码：

// 创建一个新的PDF文档
var doc = new jsPDF();

// 获取HTML元素
var element = document.getElementById('html-content');

// 将HTML内容转为PDF格式
doc.html(element, {
    callback: function (pdf) {
        // 保存PDF文件
        pdf.save('output.pdf');
    }
});

运行结果

上述代码运行后，将根据指定的 HTML 元素 html-content 的内容生成一个名为 output.pdf 的 PDF 文件。

方法二：使用Puppeteer库转换

Puppeteer 是一个由 Google 开发的 Node.js 库，提供了控制 Chrome 或 Chromium 浏览器的 API。我们可以使用 Puppeteer 将网页渲染成 PDF。

安装Puppeteer库

首先，我们需要下载和引入 Puppeteer 库。可以通过以下方式安装：

npm install puppeteer

HTML转PDF示例代码

以下是一个使用 Puppeteer 将 HTML 转为 PDF 的示例代码：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // 导航到要转换为PDF的页面
    await page.goto('https://example.com');

    // 指定PDF的输出路径和文件名
    await page.pdf({ path: 'output.pdf', format: 'A4' });

    // 关闭浏览器
    await browser.close();
})();

运行结果

上述代码运行后，将使用 Puppeteer 打开指定的页面，并将其渲染为 PDF 格式，保存为 output.pdf 文件。

方法三：使用在线服务转换

除了使用 JavaScript 库进行转换外，还有一种简单的方法就是使用在线服务将 HTML 转为 PDF。这些在线服务通常提供 API 接口，可以通过发送 HTTP 请求转换 HTML。

目前有许多在线服务可以完成这项任务，包括但不限于 pdfcrowd、pdfshift、pdf4me 等等。我们以 pdfcrowd 为例，介绍如何使用它来完成 HTML 到 PDF 的转换。

以下是使用 pdfcrowd 进行 HTML 转 PDF 的示例代码：

const axios = require('axios');
const fs = require('fs');

const htmlContent = `
<html>
<head>
    <title>PDF Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    This is an example HTML content.
</body>
</html>
`;

(async () => {
    try {
        // 发送 POST 请求到pdfcrowd API
        const response = await axios.post('https://pdfcrowd.com/api/html/to/pdf', {
            username: 'your-username',
            key: 'your-api-key',
            html: htmlContent
        }, {
            responseType: 'stream'
        });

        // 将返回的二进制流保存成PDF文件
        response.data.pipe(fs.createWriteStream('output.pdf'));
    } catch (error) {
        console.error(error);
    }
})();

上述代码中，我们首先需要注册并登录 pdfcrowd 并获取 API Key。然后，通过发送 POST 请求到 https://pdfcrowd.com/api/html/to/pdf，将 HTML 内容传递给 API，API 会将其转换为 PDF 并返回二进制流。