如何将HTML和CSS添加到PDF？

夜阑听雨x1 2023-04-30 发布于吉林

展开全文

在本教程中，我们将学习如何将HTML和CSS添加到PDF。

HTML 和 CSS 使用样式和设计构建网页。我们可以将该网页另存为 PDF 文件。使用vanilla JavaScript从头开始创建PDF非常困难，而且代码会很长。

在 JavaScript 上创建了许多库，可以帮助我们执行任务。像html2pdf，jsPDF等库是将网页转换为pdf的知名库。这些库可以使用我们添加到程序中的脚本在项目中实现。

因此，让我们看看如何将HTML和CSS添加到PDF。

在本教程中，我们将使用以下方法创建带有 HTML 和 CSS 的 PDF -

使用 html2pdf 库
使用 jsPDF 库

使用 html2pdf 库

html2pdf是一个JavaScript库，用于将任何网页转换为pdf。我们可以在 HTML 文件的脚本中使用 cdnjs 添加这个库。它易于使用，并且是一个完整的客户端库。

用户可以按照以下语法使用 html2pdf 库将网页转换为 PDF -

语法

<span style='color:#000000'>//To add html2pdf into to project
<script src= 'https://s./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);
</span>

按照上述语法将 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://s./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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

在上面的例子中，用户可以看到使用 JavaScript 的 html2pdf 库。我们已将 HTML 和 CSS 网页转换为 PDF。

使用 jsPDF 库

jsPDF也是在JavaScript上创建的库，可以将网页转换为pdf文件。我们可以像html2pdf一样导入它。我们必须在脚本的 HTML 正文的头部或结尾包含 CDN。它可以在一个语句中转换为pdf，并且可以轻松地保存在设备上。

所有用户都可以按照语法使用 jsPDF 库将网页转换为 PDF -

语法

<span style='color:#000000'>//To integrate jsPDF library
<script src = 'https://s./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>);
</span>

按照上面的语法使用 jsPDF 库将网页转换为 HTML。

例

在示例中，我们使用 jsPDF 库将网页转换为 pdf。jsPDF 库已使用脚本标记中的 cdnjs 链接插入。单击按钮后，将使用网页上显示的相同内容创建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://s./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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.