极客教程HTML 如何将HTML和CSS添加到PDF中
在网页开发过程中，HTML和CSS经常需要转换为PDF格式。PDF可以创建可打印的文档，实现跨多个平台的信息交换，并保留网页的原始布局。有多种方法可以将HTML和CSS转换为PDF文件，从简单的在线工具到复杂的编程库。
这些技术可以使用HTML和CSS代码自动生成PDF，也可以使用第三方应用程序手动生成。因此，可以通过结合HTML和CSS创建交互式、视觉上美观且易于转换为PDF以用于共享或归档的网页。在本文中，我们将看到如何将HTML和CSS添加到PDF中。
术语
- 超文本标记语言（HTML）： 一种用于生成网页的标记语言。
- 层叠样式表（CSS）： 一种用于指定HTML内容呈现方式的样式表语言。
- 可移植文档格式（PDF）： 一种用于以与硬件、软件和操作系统无关的方式展示文档的文件格式。
有多种方法可以将HTML和CSS转换为PDF，包括：
-
网络资源： 有许多在线资源可用于将HTML和CSS转换为PDF，包括HTML to PDF Converter、PDFcrowd等。
- 编程库： 开发人员可以使用内置库来在运行时将HTML和CSS转换为PDF格式。
-
第三方工具： 开发人员可以使用第三方应用程序（如Adobe Acrobat、Microsoft Word和Google Docs）手动将HTML和CSS转换为PDF。
方法： 要将HTML和CSS添加到PDF中，可以使用不同的方法。这些方法可能涉及使用库、插件或软件从HTML和CSS文件中生成PDF。具体的语法将取决于所使用的方法。
方法1：使用jsPDF： 通过jsPDF JavaScript库，可以在客户端上实现PDF文件创建。它提供了一种简单的方法，通过组合HTML、CSS和JavaScript，在浏览器中直接创建和下载PDF文件。使用该库通常会创建报告、发票、票据等需要打印或交付的文档。
语法：
// Loading the jsPDF library
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js">
</script>
// Getting the HTML element to convert into PDF
var element = document.getElementById("element selector");
// Creating a new jsPDF object
var pdf = new jsPDF();
// Use jsPDF's 'fromHTML' method to add HTML element to PDF
pdf.fromHTML(element);
// Saving the PDF with specified file name
pdf.save("file");
示例： 在这个例子中，我们将看到如何使用javascript中的jsPDF库将HTML和CSS代码转换为pdf文档。jsPDF提供了一个简单的API来生成PDF文件，并具有文本格式化、字体嵌入和图片支持等功能。只需点击 DOWNLOAD PDF 按钮，我们就能下载HTML和CSS文档的pdf版本。我们已经初始化了一些应该在pdf中显示的文本。使用jsPDF的语法已经被定义好了。
HTML
<!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">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js">
</script>
</head>
<body>
<div class="GFG">
<h1 style="color: tomato;">
GeeksForGeeks
</h1>
<h2>Founded by Sandeep Jain</h2>
<p>A Computer Science portal for geeks.</p>
<p>
It contains well written, well thought
and well explained computer science
and programming articles.
</p>
</div>
<button id="btn"> PDF MAKER </button>
<script>
var button = document.getElementById("btn");
button.addEventListener("click", function () {
var doc = new jsPDF();
var pdf = document.querySelector(".GFG");
doc.fromHTML(pdf);
doc.save("GFG.pdf");
});
</script>
</body>
</html>
输出:
方法2：使用html2pdf库
语法：
// Loading the html2pdf library
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js">
</script>
// Creating a pdf
var element = document.getElementById("HTML tag selector");
html2pdf("tag");
示例: 在本示例中，我们将再次看到如何使用javascript中的html2pdf库将HTML和CSS代码转换为pdf文档。它使用其他各种库如jsPDF，html2canvas等将HTML和CSS文档转换成pdf。只需点击 DOWNLOAD PDF 按钮，我们就可以下载HTML和CSS文档的pdf版本。我们已经初始化了一些文本，应该在pdf中存在。html2pdf的使用语法已经定义好了。
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js">
</script>
</head>
<body>
<div id="content">
<h1 style="color: tomato;">
GeeksForGeeks
</h1>
<h2>Founded by Sandeep Jain</h2>
<p>A Computer Science portal for geeks. </p>
<p>
It contains well written, well thought
and well explained computer science
and programming articles.
</p>
</div>
<button id="download-pdf">Download PDF</button>
<script>
document.getElementById('download-pdf')
.addEventListener('click', () => {
const element = document.getElementById('content');
const options = {
filename: 'GFG.pdf',
margin: 0,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: {
unit: 'in',
format: 'letter',
orientation: 'portrait'
}
};
html2pdf().set(options).from(element).save();
});
</script>
</body>
</html>
输出：
