数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何将 HTML 和 CSS 添加到 PDF 中？
在本教程中，我们将学习如何将 HTML 和 CSS 添加到 PDF 中。
HTML 和 CSS 使用样式和设计构建网页。我们可以将该网页保存为 PDF 文件。使用原生 JavaScript 从头开始创建 PDF 非常困难，并且代码将很长。
在 JavaScript 上创建了许多库来帮助我们执行任务。像 html2pdf、jsPDF 等库是将网页转换为 pdf 的知名库。这些库可以通过我们添加到程序中的脚本在项目中实现。
因此，让我们看看如何将 HTML 和 CSS 添加到 PDF 中。
在本教程中，我们将使用以下方法创建包含 HTML 和 CSS 的 PDF：
- 使用 html2pdf 库
- 使用 jsPDF 库
使用 html2pdf 库
html2pdf 是一个用于将任何网页转换为 pdf 的 JavaScript 库。我们可以使用 cdnjs 在 HTML 文件的脚本中添加此库。它易于使用，并且是一个完整的客户端库。
用户可以按照以下语法使用 html2pdf 库将网页转换为 PDF：
语法
//To add html2pdf into to project <script src= "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"> </script> //To create a pdf var element = document.getElementById(<element to convert into pdf>); html2pdf(element);
按照上述语法将 HTML 和 CSS 网页转换为 PDF。
示例
在示例中，我们使用了 html2pdf 库将网页转换为 pdf。我们在网页上添加了标题和段落。单击网页上的按钮后，此网页将转换为 pdf。
<html>
<head>
<style>
body {
text-align: center;
}
#div {
color: red;
background-color: green;
align-content: center;
text-align: center;
}
</style>
</head>
<body>
<button id="btn"> Create PDF </button>
<div id="div">
<h2> Using <i> html2pdf library </i> to convert webpage into a pdf </h2>
<p> This is the Demo Text! </p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js">
</script>
<script>
var btn = document.getElementById("btn");
var createpdf = document.getElementById("div");
var opt = {
margin: 1,
filename: 'pdfcreated.pdf',
html2canvas: {
scale: 2
},
jsPDF: {
unit: 'in',
format: 'letter',
orientation: 'portrait'
}
};
btn.addEventListener("click", function() {
html2pdf().set(opt).from(createpdf).save();
});
</script>
</body>
</html>
在上述示例中，用户可以看到使用 JavaScript 的 html2pdf 库。我们将 HTML 和 CSS 网页转换为 PDF。
使用 jsPDF 库
jsPDF 也是一个基于 JavaScript 创建的库，可以将网页转换为 pdf 文件。我们可以像 html2pdf 一样导入它。我们必须在 HTML 中的头部或主体末尾的脚本中包含 CDN。它只需一个语句即可转换为 pdf，并且可以轻松保存在设备上。
所有用户都可以按照语法使用 jsPDF 库将网页转换为 PDF：
语法
//To integrate jsPDF library <script src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> var element = document.getElementById(<element to convert into pdf>); var pdf = new jsPDF(); pdf.fromHTML(element); pdf.save(<File name>);
按照上述语法使用 jsPDF 库将网页转换为 HTML。
示例
在示例中，我们使用了 jsPDF 库将网页转换为 pdf。jsPDF 库已使用 cdnjs 链接插入到 script 标签中。单击按钮后，将创建具有与网页上显示相同内容的 pdf。
<html>
<body>
<button id="btn"> Create PDF </button>
<div id="container">
<h2> Using <i> jsPDF library </i> to convert webpage into a pdf </h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, explicabo ullam asperiores esse quod nihil! </p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js">
</script>
<script>
var button = document.getElementById("btn");
button.addEventListener("click", function() {
var doc = new jsPDF();
var pdf = document.querySelector("#container");
doc.fromHTML(pdf);
doc.save("file.pdf");
});
</script>
</body>
</html>
在上述示例中，用户可以看到使用 JavaScript 的 jsPDF 库，我们将 HTML 和 CSS 网页转换为 PDF。
在本教程中，我们学习了如何将 HTML 和 CSS 添加到 PDF 中。
8K+ 阅读量
