数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何从HTML网页生成PDF？
在这篇文章中，我们将探讨将所需的HTML内容转换为PDF文件的方法。很多时候我们需要阅读并接受条款和条件，更好的方法是下载PDF文件，在空闲时间阅读，然后再接受。因此，为了实现这一点，我们可以利用将内容转换为PDF文件的方法。
我们还需要将一些内容存储在PDF文件中，以便以后用于各种目的。最常见的用途包括下载章节、文本、论文等。
上述转换可以通过两种方式实现：
打印特定网页并将其另存为PDF
使用**jsPDF**库
我们将在下面的示例中探讨这两种方法
示例1：打印特定网页并将其另存为PDF。
在下面的示例中，我们将探讨第一种方法，并将特定网页打印成PDF。这类似于默认打印并将文件保存为PDF。
实现此目标的步骤如下：
使用**window.open()**方法打开一个新窗口
将div标签的**innerHTML**写入窗口中
打印并关闭窗口
示例
#文件名：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Generate PDF</title>
<style>
.container {
position: fixed;
top: 20%;
left: 28%;
border-radius: 7px;
}
.card {
box-sizing: content-box;
width: 300px;
height: 400px;
padding: 30px;
border: 1px solid black;
font-style: sans-serif;
background-color: #f0f0f0;
}
h2 {
text-align: center;
color: #24650b;
}
</style>
</head>
<body>
<div class="container">
<button id="pdfButton"><b>Click here to Generate PDF</b></button>
<div class="card" id="generatePDF">
<h2>Welcome to Tutorials Point</h2>
<ul>
<li>
<h4> We are going to generate a pdf from the area inside the box</h4>
</li>
<li>
<h4> About Company </h4>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the
comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
</li>
</ul>
</div>
</div>
<script>
var button = document.getElementById("pdfButton");
var makepdf = document.getElementById("generatePDF");
button.addEventListener("click", function () {
var mywindow = window.open("", "PRINT", "height=600,width=600");
mywindow.document.write(makepdf.innerHTML);
mywindow.document.close();
mywindow.focus();
mywindow.print();
return true;
});
</script>
</body>
</html>输出
示例2：使用jsPDF库
另一种方法是使用JS提供的PDF库，即jsPDF库。使用此库的步骤如下：
在HTML的<head>标签中包含指向**jsPDF**的CDN链接以导入库。
现在我们可以使用上述库来使用其函数。我们将使用**fromHTML**方法从HTML创建PDF。
文件生成后，使用save()函数保存文件。
示例2
#文件名：index.html
<!DOCTYPE html>
<html>
<head>
<title>Generate PDF using 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%;
border-radius: 7px;
}
#generatePdf {
box-sizing: content-box;
width: 300px;
height: 100px;
padding: 30px;
border: 1px solid black;
font-style: sans-serif;
background-color: #f0f0f0;
}
#pdfButton {
background-color: #4caf50;
border-radius: 5px;
margin-left: 300px;
margin-bottom: 5px;
color: white;
}
h2 {
text-align: center;
color: #24650b;
}
</style>
</head>
<body>
<div class="container">
<button id="pdfButton">Generate PDF</button>
<div id="generatePdf">
<h2>Welcome to Tutorials Point</h2>
<ul>
<li>
<h4> The following content will be downloaded as PDF.</h4>
</li>
<li>
<h4>About Company</h4>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
<p>The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
</li>
</ul>
</div>
</div>
<script>
var button = document.getElementById("pdfButton");
button.addEventListener("click", function () {
var doc = new jsPDF("p", "mm", [300, 300]);
var makePDF = document.querySelector("#generatePdf");
// fromHTML Method
doc.fromHTML(makePDF);
doc.save("output.pdf");
});
</script>
</body>
</html>输出
更新于：2022年4月26日
18K+ 次浏览
广告