极客教程如何通过HTML设计运行时生成的PDF文件
很多时候，在使用浏览器时，我们面临的问题是将特定的网页或任何在线特定元素保存为PDF文件的形式。在这种情况下，我们要么使用第三方扩展程序，要么使用应用程序或工具将其生成为PDF文件。在本文中，我们将学习如何通过HTML设计运行时生成的PDF文件。我们可以通过以下三种方式来实现这个任务：
- 将特定网页打印并保存为PDF文件
- 使用jsPDF库
- 使用html2pdf库
让我们通过示例逐个了解这三个概念。
将特定元素打印并保存为PDF文件： 我们将在运行时生成一个窗口，并将其保存为PDF文件。这类似于系统的默认打印功能。下面讨论了具体的步骤。
- 使用 window.open 方法创建一个新窗口。
- 在窗口内部为我们的
标签编写innerHTML。
* 打印窗口。
* 关闭窗口。
示例： 在这个示例中，我们将使用html2pdf CDN链接来生成PDF文件。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- html2pdf CDN-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js">
</script>
<style>
.container {
position: fixed;
top: 20%;
left: 28%;
margin-top: -65px;
margin-left: -100px;
border-radius: 7px;
}
.card {
box-sizing: content-box;
width: 700px;
height: 150px;
padding: 30px;
border: 1px solid black;
font-style: sans-serif;
background-color: #f0f0f0;
}
#button {
background-color: #4caf50;
border-radius: 5px;
margin-left: 650px;
margin-bottom: 5px;
color: white;
}
h2 {
text-align: center;
color: #24650b;
}
</style>
</head>
<body>
<div class="container">
<button id="button">Generate PDF</button>
<div class="card" id="makepdf">
<h2>Welcome to GeeksforGeeks</h2>
<ul>
<li>
<h4>
We are going to generate a pdf
from the area inside the box
</h4>
</li>
<li>
<h4>
This is an example of generating
pdf from HTML during runtime
</h4>
</li>
</ul>
</div>
</div>
</body>
<script>
let button = document.getElementById("button");
let makepdf = document.getElementById("makepdf");
button.addEventListener("click", function () {
let mywindow = window.open("", "PRINT",
"height=400,width=600");
mywindow.document.write(makepdf.innerHTML);
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
return true;
});
</script>
</html>
输出：
使用jsPDF库： 为了在运行时生成PDF文档，我们可以使用jsPDF库。步骤如下：
- 在HTML文档的
<head>标签中包含jsPDF CDN。CDN如下所示，可以在谷歌上搜索“JsPDF CDN”以获取最新版本。 - 使用“fromHTML”方法从HTML div生成PDF文档。
- 使用javascript中的save()方法保存文件。
示例： 以下是jsPDF库的基本使用方法。
HTML
<!DOCTYPE html>
<html>
<head>
<title>jsPDF Library</title>
<!--JSPDF CDN-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js">
</script>
<style>
.container {
position: fixed;
top: 20%;
left: 28%;
margin-top: -65px;
margin-left: -100px;
border-radius: 7px;
}
#makepdf {
box-sizing: content-box;
width: 700px;
height: 150px;
padding: 30px;
border: 1px solid black;
font-style: sans-serif;
background-color: #f0f0f0;
}
#button {
background-color: #4caf50;
border-radius: 5px;
margin-left: 650px;
margin-bottom: 5px;
color: white;
}
h2 {
text-align: center;
color: #24650b;
}
</style>
</head>
<body>
<div class="container">
<button id="button">Generate PDF</button>
<div id="makepdf">
<h2>Welcome to GeeksforGeeks</h2>
<ul>
<li>
<h4>
We are going to generate a pdf
from the area inside the box
</h4>
</li>
<li>
<h4>
This is an example of generating
pdf from HTML during runtime
</h4>
</li>
</ul>
</div>
</div>
<script>
let button = document.getElementById("button");
button.addEventListener("click", function () {
let doc = new jsPDF("p", "mm", [300, 300]);
let makePDF = document.querySelector("#makepdf");
// fromHTML Method
doc.fromHTML(makePDF);
doc.save("output.pdf");
});
</script>
</body>
</html>
输出：
使用html2pdf库： 使用html2pdf库生成pdf文件的步骤如下：
- 在HTML文档顶部包含html2pdf的CDN。下面是CDN地址，搜索“html2pdf CDN”可获取最新版本。
- 使用html2pdf()对象生成pdf。这是html2pdf库的默认对象。
- 保存pdf文件。
示例： 下面是html2pdf库的基本使用示例。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- html2pdf CDN-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js">
</script>
<style>
.container {
position: fixed;
top: 20%;
left: 28%;
margin-top: -65px;
margin-left: -100px;
border-radius: 7px;
}
.card {
box-sizing: content-box;
width: 700px;
height: 150px;
padding: 30px;
border: 1px solid black;
font-style: sans-serif;
background-color: #f0f0f0;
}
#button {
background-color: #4caf50;
border-radius: 5px;
margin-left: 650px;
margin-bottom: 5px;
color: white;
}
h2 {
text-align: center;
color: #24650b;
}
</style>
</head>
<body>
<div class="container">
<button id="button">Generate PDF</button>
<div class="card" id="makepdf">
<h2>Welcome to GeeksforGeeks</h2>
<ul>
<li>
<h4>
We are going to generate a pdf
from the area inside the box
</h4>
</li>
<li>
<h4>
This is an example of generating
pdf from HTML during runtime
</h4>
</li>
</ul>
</div>
</div>
<script>
let button = document.getElementById("button");
let makepdf = document.getElementById("makepdf");
button.addEventListener("click", function () {
html2pdf().from(makepdf).save();
});
</script>
</body>
</html>
输出：
