纯JS将HTML生成pdf

该方案使用纯js脚本将页面html内容转换成pdf

设计脚本

jspdf
html2canvas
html2pdf

jsPdf

jsPDF是一个轻量级且强大的JavaScript库，它允许开发者在浏览器中直接生成PDF文件。以下是关于jsPDF的详细介绍：

项目简介：

jsPDF提供了在前端创建、编辑和下载PDF文档的能力，无需依赖服务器端的支持。
它为Web应用提供了更多的可能性，使得开发者能够直接在客户端生成PDF文件。

核心功能：

文本处理：支持添加、定位和样式化PDF中的文本。
图像处理：可以将图片插入到PDF中，支持多种格式（如JPEG、PNG、SVG）。
形状绘制：提供画线、矩形、椭圆等基本图形的API。
页面管理：能够添加、删除和调整PDF页面的布局。
单位与尺寸控制：支持毫米、英寸、点等多种度量单位，并能进行精确的尺寸计算。

底层实现：

jsPDF基于Adobe的PDF规范，采用HTML5 Canvas和SVG作为渲染后端。
它可以利用JavaScript对DOM元素的遍历能力，将网页内容转换成PDF。
对于更复杂的SVG图形，jsPDF依赖于第三方库如html2canvas和svg-to-pdfkit进行转换。

兼容性：

jsPDF兼容大多数现代浏览器，包括Chrome, Firefox, Safari, Edge等。
由于其基于Canvas，所以对IE的支持有限，需要额外引入polyfill库。

应用场景：

报表导出：在数据可视化应用中，用户可以一键将图表或数据分析结果保存为PDF报告。
发票打印：网购平台可以在订单完成后生成PDF发票供用户下载或打印。
电子书籍：制作在线阅读器时，jsPDF可用于生成电子书的PDF版本。
合同签署：在线合同签署服务可以借助jsPDF生成待签字的PDF文档。
特点：
易用性强：jsPDF提供了一套直观的API接口，使得生成PDF文档变得简单快捷。
灵活性高：可以自定义样式、布局和内容，满足各种设计需求。
离线可用：所有处理都在客户端完成，不需服务器交互，确保用户隐私。
社区活跃：项目维护更新频繁，有丰富的插件和示例代码可供参考和扩展。

使用注意事项：

jsPDF本身不支持直接渲染中文文本，但可以通过结合html2Canvas等库先将HTML内容转换为图片，再将其添加到PDF中。
在处理复杂布局或样式时，可能需要额外的工作来确保生成的PDF文件符合预期。
总的来说，jsPDF是一个功能强大、灵活易用的前端PDF处理库，适用于各种需要生成PDF文件的Web应用场景。

html2canvas

html2canvas是一个JavaScript库，其主要功能是将HTML元素转换为Canvas图像。

功能概述

HTML转Canvas：html2canvas能够将HTML元素（包括HTML5 Canvas）转换为Canvas图像。这使得开发者能够在客户端进行截图、图像生成等操作。
截图与分享：由于能够将网页内容转换为图像，html2canvas常被用于实现网页截图、社交媒体分享等功能。

使用方法

安装与引入：
- 可以直接通过CDN引入html2canvas的最新版本。
- 也可以通过npm或yarn等包管理工具进行安装和引入。
基本用法：
- 传入需要转换的HTML元素（可以是CSS选择器、DOM元素或jQuery对象）。
- 调用html2canvas函数后，会返回一个Promise对象，当Canvas图像生成后，可以在then方法中进行后续操作。

常用选项

scale：控制生成图片的质量，取值范围为0到1，默认为1。例如，设置scale为0.5时，生成的图片质量为原图的一半。
backgroundColor：指定生成的Canvas图像的背景色，可以使用CSS颜色值或十六进制颜色值。
useCORS：默认情况下，html2canvas不支持跨域的图片转换。如果需要转换跨域图片，可以设置useCORS选项为true。

注意事项

兼容性：html2canvas在大多数现代浏览器中都有良好的兼容性，但可能在一些较旧的浏览器或特定环境下存在兼容性问题。
性能：对于较大的HTML元素或复杂的页面结构，转换过程可能会消耗较多的计算资源，并可能导致页面卡顿或崩溃。因此，在使用时需要注意性能优化。
跨域问题：由于浏览器的同源策略限制，当尝试转换跨域的图片时可能会遇到问题。此时，可以通过设置useCORS选项或使用代理服务器等方法来解决。

示例代码

// 引入html2canvas  
<script src="https://cdn.jsdelivr.net/npm/html2canvas@latest"></script>  
  
// HTML元素  
<div id="capture" style="padding: 10px; background: #f5da55;">  
  <h4 style="color: #fff;">Hello world!</h4>  
</div>  
  
// JavaScript代码  
html2canvas(document.querySelector("#capture")).then(canvas => {  
  document.body.appendChild(canvas); // 将生成的Canvas图像添加到页面中  
});

html2pdf

html2pdf 是一种将 HTML 页面转换为 PDF 文档的解决方案。

定义与功能：

html2pdf 是一种工具或库，用于将 HTML 页面转换为 PDF 格式。
它允许开发人员快速、便捷地生成高质量的 PDF 文件，无论是在 Web 网页上还是在服务器环境中。

技术实现：

html2pdf 有多种实现方式，包括使用 PHP 编写的库（如 Html2Pdf、xhtml2pdf 等）以及 JavaScript 实现的库（如 jsPDF 结合 html2canvas）。
这些库通常依赖于其他库（如 TCPDF、html2canvas 等）来辅助实现 HTML 到 PDF 的转换。

主要特点：

高质量输出：生成的 PDF 文件通常具有良好的排版和格式，能够保留 HTML 中的样式、图像和链接等元素。
灵活性：提供了丰富的选项和配置，可以根据需求进行定制，如设置页面大小、页眉页脚、字体样式等。
跨版本兼容：如 Html2Pdf 支持 PHP 5.6 至 8.2，适配广泛的开发环境。
易用性：提供了简洁的 API 和丰富的示例代码，使得将 HTML 转换为 PDF 变得非常容易。

应用场景：

发票生成：将动态生成的 HTML 发票转换为 PDF，便于电子发送或打印。
文档制作：创建 PDF 手册或说明书，支持自定义布局和样式。
报告导出：网站或应用程序中的数据报告可以方便地导出为 PDF，方便用户离线查看。
电子书制作：将 HTML 格式的电子书转换为 PDF，以便在各种设备上阅读。

使用注意事项：

性能：对于较大的 HTML 元素或复杂的页面结构，转换过程可能会消耗较多的计算资源，并可能导致页面卡顿或崩溃。
跨域问题：在转换跨域图片时可能会遇到问题，此时可以通过设置 CORS 选项或使用代理服务器等方法来解决。
字体嵌入：确保 PDF 中使用的字体已正确嵌入，以避免在其他设备上出现字体不一致的问题。

样例

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
	</head>
<body>
  <div class="tableBody">  
			<div class="layui-input-block">
				<button id="download_pdf" class="layui-btn" lay-submit lay-filter="form-submit">生成pdf内容</button>
			</div>
		  <div id="download_info" class="download_info">
			<span>
				这是一个测试内容
			</span>
		  </div>
  </div>
<script src="./jquery-3.6.0.min.js"></script>
<script src="./jspdf.debug.js"></script>
<script src="./html2pdf.bundle.min.js"></script>
<script src="./html2canvas.min.js"></script>
<script src="./index.js"></script>
</body>
</html>

$(function() {
	//下载结果
	$('#download_pdf').on('click',function(){			
		html2canvas(document.querySelector("#download_info")).then(canvas => {
			//document.body.appendChild(canvas)
			const marginBottom = 0
			let canvasWidth = canvas.width
			let canvasHeight = canvas.height + marginBottom * 2
			let pageHeight = canvasWidth / 592.28 * 841.89 + marginBottom * 2
			let allPageHeight = canvasHeight
			let position = 0
			let imgWidth = 595.28
			let imgHeight = 592.28 / canvasWidth * canvasHeight
			let pageData = canvas.toDataURL('image/jpeg', 3.0)
			//通过html2canvas将html渲染成canvas，然后获取图片数据
			let PDF = new jsPDF('', 'pt', 'a4')
			if (allPageHeight < pageHeight) {
			  PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
			} else {
			  while (allPageHeight > 0) {
				PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
				allPageHeight = allPageHeight - pageHeight - marginBottom
				position = position - 841.89 - marginBottom
				if (allPageHeight > 0) {
				  PDF.addPage()
				}
			  }
			}
			//输出保存命名为content的pdf
			PDF.save('wf.pdf');
		});
	});
});