使用 JavaScript 将 HTML 转换为 PDF
Posted scanp002
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用 JavaScript 将 HTML 转换为 PDF相关的知识，希望对你有一定的参考价值。
使用 javascript 将 html 转换为 PDF
更多相关学习资料参见http://www.pdfdownload.cn/b/ba_index.php
在本文中，我们将了解如何在浏览器（即完全在客户端）中生成任何 HTML 元素的 PDF。
我们将使用该包html2pdf生成 PDF。
html2pdf是使用html2canvas的HTML元素转换为画布，然后进入图像。然后它在 的帮助下生成图像的 PDF jsPDF。
要了解更多信息，请查看这里。
执行
让我们看看包的一个小实现html2pdf。
索引.html
一个基本的 HTML 页面，其中包含包的捆绑链接。
创建了一个简单内容的 div 块和一个导出 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
包含 main 方法的 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 是不可搜索的。
以上是关于使用 JavaScript 将 HTML 转换为 PDF的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 JavaScript 将 PHP 代码转换为 HTML？
使用 vanilla javascript 将 es6 模板字符串转换为 html 元素
使用 JavaScript 将 HTML DOM 结构（或克隆）转换为 JSON，可能的 JQuery [重复]
如何使用 Html css Javascript 将 localhost 网站项目转换为 Android Web 应用程序