在浏览器中生成 HTML 元素的 PDF

大家好👋

在本文中，我们将了解如何在浏览器中（即完全在客户端）生成任何 HTML 元素的 PDF。

我们将使用该包html2pdf来生成 PDF。

html2pdf用于html2canvas将 HTML 元素转换为画布，然后再转换为图像。然后借助生成图像的 PDF jsPDF。

如果您想了解更多信息html2canvas，请查看这篇文章。

执行

让我们看一下该包的一个小的实现html2pdf。

索引.html

一个基本的 HTML 页面，其中包含包的捆绑链接。

创建了一个包含简单内容的 div 块和一个导出 PDF 按钮。点击导出 PDF 按钮后，我们将生成一个 div 的 PDF 文件，其 ID 即为view点击按钮时生成的 PDF 文件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML2PDF</title>
    <script src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js" defer></script>
    <script src="./script.js" defer></script>
</head>

<body onload="main()" align="center">
    <div id="view" align="center">
        <h1>Export PDF</h1>
        <h3>Using HTML2PDF</h3>
    </div>
    <button id="export-pdf">Export PDF</button>
</body>

</html>

脚本.js

JavaScript 文件包含主要方法，该方法将在网站加载后调用并监听onclick导出 PDF 按钮上的事件。

单击导出 PDF 按钮时，html2pdf将调用该方法，该方法以元素（div）的引用作为其参数。

function main() {
    var view = document.getElementById("view");
    var exportPDF = document.getElementById("export-pdf");
    exportPDF.onclick = (e) => html2pdf(view);
}

单击按钮后，将生成 PDF 并直接下载到您的系统。

我们还可以在方法中传递一些配置选项html2pdf来处理图像类型、质量、文件名等。要了解更多信息，请查看此处。

注意：基于图像的 PDF 不可搜索。

Github 仓库：PDF 生成器

尝试一下：直播

最初发表于blog.bibekkakati.me

感谢您的阅读🙏

如果您喜欢这篇文章或觉得它有帮助，请点赞👍

欢迎随时联系👋

Twitter | Instagram | LinkedIn

如果你喜欢我的作品并想支持它，可以在这里留言。我会非常感激。

文章来源：https://dev.to/bibekkakati/generate-pdf-of-html-element-in-browser-lg9