如何将 HTML 和 CSS 添加到 PDF?

htmlweb developmentfront end technology更新于 2024/7/25 20:28:17

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

HTML 和 CSS 构建了包含样式和设计的网页。我们可以将该网页保存为 PDF 文件。使用原生 JavaScript 从头创建 PDF 非常困难，而且代码很长。

许多基于 JavaScript 创建的库可以帮助我们完成任务。html2pdf、jsPDF 等库都是将网页转换为 PDF 的知名库。这些库可以通过我们添加到程序中的脚本在项目中实现。

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

在本教程中，我们将使用以下方式创建包含 HTML 和 CSS 的 PDF -

使用 html2pdf 库
使用 jsPDF 库

使用 html2pdf 库

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

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

语法

//将 html2pdf 添加到项目中
<script src= "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"> </script>

//创建 PDF
var element = document.getElementById(<要转换为 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 -

语法

//集成 jsPDF 库
<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 链接插入。点击按钮后，将创建与网页上显示内容相同的 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。