如何利用js或php将html网页转为pdf

网页转PDF是一种常见的需求，它让我们能将网站内容以固定格式保存下来。使用JavaScript或PHP将HTML网页转为PDF包括：使用JavaScript库、使用PHP库。在这些转换工具中，JavaScript库如jsPDF和html2pdf.js非常受欢迎，而PHP则有像TCPDF或mPDF这样的库。我们将重点介绍使用JavaScript的jsPDF库来实现转换，这是因为jsPDF库提供了很好的客户端支持，操作简单，而且可以在不与服务器通信的情况下完成转换。

jsPDF是一个使用纯JavaScript编写的库，它可以在前端环境中工作，不需要后端支持。要使用jsPDF，首先需要在项目中引入它的库文件。你可以从jsPDF的GitHub存储库或者通过npm来安装它。一旦引入了jsPDF库，就可以使用JavaScript代码来读取HTML的内容，并使用jsPDF提供的API来生成PDF文件。

一、引入JSPDF库

要开始转换流程，你首先需要将jsPDF引入到你的网页中。你可以直接下载jsPDF库并通过<script>标签引入，或者通过包管理器如npm来安装。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>

或者使用npm进行安装：

npm install jspdf

然后在你的JavaScript文件中引入：

import { jsPDF } from "jspdf";

二、选择并修改HTML内容

在生成PDF之前，你可能希望修改HTML以确保转换出的PDF文件符合你的需求。例如，你可能需要隐藏某些页面元素，只保留主要内容。

// 获取需要转换的HTML元素
const element = document.getElementById('content-to-pdf');
// 修改HTML内容，比如隐藏不需要的元素
element.querySelectorAll('.no-print').forEach(element => element.style.display = 'none');

三、创建JSPDF实例并转换HTML

创建一个新的jsPDF实例，并使用jsPDF提供的API来读取HTML元素，并将其转化为PDF格式。

const doc = new jsPDF();
// 假设你希望页面呈现在一个A4大小的PDF中
doc.html(document.body, {
  callback: function (doc) {
    doc.save('webpage.pdf');
  },
  x: 10,
  y: 10,
  width: 190,
  windowWidth: document.body.scrollWidth
});

四、调整PDF的格式和布局

转换过程中你可能需要调整PDF的格式和布局，比如页面尺寸、边距、或是是否需要横向打印等。

const doc = new jsPDF({
  orientation: 'p', // 纵向
  unit: 'mm', // 单位使用毫米
  format: 'a4', // 格式为A4纸
});

五、保存PDF文件

一旦HTML内容被转换成PDF，你可以使用save()方法来保存文件，或者通过其他方式来处理生成的PDF数据。

doc.save('converted-webpage.pdf'); // 保存PDF文件

六、使用PHP进行HTML到PDF的转换

如果你希望在服务器端进行HTML到PDF的转换，可以使用PHP的库，例如TCPDF或mPDF。要使用这些库，你需要先在你的PHP环境中引入它们，通常可以通过Composer来进行安装。

composer require tecnickcom/tcpdf

然后在PHP脚本中创建一个TCPDF对象，并使用该对象提供的方法把HTML代码转换为PDF格式。

require_once('tcpdf_include.php');
// 创建新的PDF文档
$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
// 设置文档信息
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor('Your Name');
$pdf->SetTitle('TCPDF Example 001');
$pdf->SetSubject('TCPDF Tutorial');
$pdf->SetKeywords('TCPDF, PDF, example, test, guide');
// 添加一个页面
$pdf->AddPage();
// 设置内容
$html = '<h1>Welcome to TCPDF!</h1>';
$pdf->writeHTML($html, true, false, true, false, '');
// 输出PDF
$pdf->Output('example_001.pdf', 'I');

七、样式和字体管理

处理PDF转换时，你可能需要考虑文档中的样式和字体，确保生成的PDF文件保留了网页内容的风格。

jsPDF和TCPDF都提供了对样式的基本支持，你可以在 HTML 中直接使用CSS样式，或者在生成PDF时应用样式。然而，由于PDF的渲染方式与网页不完全相同，可能会有些许差异。对于jsPDF，可以通过插件来增强对CSS的支持。而对于TCPDF，你需要仔细调整CSS来得到最佳效果。

doc.setFont("helvetica");
doc.setFontStyle("bold");
doc.setFontSize(16);
doc.text("Hello World!", 10, 10);

$html = '<style>.title {color: #007bff;}</style><div class="title">This is a blue title.</div>';
$pdf->writeHTML($html, true, false, true, false, '');

八、高级功能和自定义

在PDF转换的过程中，你可能还需要处理一些高级功能，例如添加页眉页脚、水印、表格、图像等内容。这些功能在jsPDF和TCPDF库中通常都有支持，但它们的实现方式略有不同。根据具体的需求，可以调用相应的库函数来实现。

jsPDF提供了各种方法来增强PDF的功能，如addImage()用于添加图像，setProperties()用于设置文档属性等。

// 添加图片
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

TCPDF同样提供了强大的功能来处理PDF的高级内容。

// 设置页眉
$pdf->setHeaderData('', 0, 'Title', 'Header', array(0,64,255), array(0,64,128));
$pdf->setHeaderFont(Array('helvetica', '', 10));
// 添加水印
$pdf->SetAlpha(0.3);
$pdf->Image('watermark.png', 25, 110, 160, 40, '', '', '', false, 300, '', false, false, 0);
// 复原全透明度
$pdf->SetAlpha(1);

总结起来，利用JavaScript或PHP将HTML网页转为PDF文件涉及到选择合适的库、处理网页内容、调整PDF版式、以及运用库提供的高级功能以实现复杂的定制需求。无论选择客户端的jsPDF还是服务器端的TCPDF，基本的实现步骤和方法都是类似的。在具体实现时，需要根据项目的实际需求和环境来选择最合适的工具和方法。