编程技术

Document

纯JS将HTML生成pdf

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

设计脚本

  1. jspdf
  2. html2canvas
  3. html2pdf

jsPdf

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

  1. 项目简介：
  • jsPDF提供了在前端创建、编辑和下载PDF文档的能力，无需依赖服务器端的支持。
  • 它为Web应用提供了更多的可能性，使得开发者能够直接在客户端生成PDF文件。
  1. 核心功能：
  • 文本处理：支持添加、定位和样式化PDF中的文本。
  • 图像处理：可以将图片插入到PDF中，支持多种格式（如JPEG、PNG、SVG）。
  • 形状绘制：提供画线、矩形、椭圆等基本图形的API。
  • 页面管理：能够添加、删除和调整PDF页面的布局。
  • 单位与尺寸控制：支持毫米、英寸、点等多种度量单位，并能进行精确的尺寸计算。
  1. 底层实现：
  • jsPDF基于Adobe的PDF规范，采用HTML5 Canvas和SVG作为渲染后端。
  • 它可以利用JavaScript对DOM元素的遍历能力，将网页内容转换成PDF。
  • 对于更复杂的SVG图形，jsPDF依赖于第三方库如html2canvas和svg-to-pdfkit进行转换。
  1. 兼容性：
  • jsPDF兼容大多数现代浏览器，包括Chrome, Firefox, Safari, Edge等。
  • 由于其基于Canvas，所以对IE的支持有限，需要额外引入polyfill库。
  1. 应用场景：
  • 报表导出：在数据可视化应用中，用户可以一键将图表或数据分析结果保存为PDF报告。
  • 发票打印：网购平台可以在订单完成后生成PDF发票供用户下载或打印。
  • 电子书籍：制作在线阅读器时，jsPDF可用于生成电子书的PDF版本。
  • 合同签署：在线合同签署服务可以借助jsPDF生成待签字的PDF文档。
    特点：
  • 易用性强：jsPDF提供了一套直观的API接口，使得生成PDF文档变得简单快捷。
  • 灵活性高：可以自定义样式、布局和内容，满足各种设计需求。
  • 离线可用：所有处理都在客户端完成，不需服务器交互，确保用户隐私。
  • 社区活跃：项目维护更新频繁，有丰富的插件和示例代码可供参考和扩展。

使用注意事项：

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

html2canvas

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

  1. 功能概述
  • HTML转Canvas：html2canvas能够将HTML元素（包括HTML5 Canvas）转换为Canvas图像。这使得开发者能够在客户端进行截图、图像生成等操作。
  • 截图与分享：由于能够将网页内容转换为图像，html2canvas常被用于实现网页截图、社交媒体分享等功能。
  1. 使用方法
  • 安装与引入：
    • 可以直接通过CDN引入html2canvas的最新版本。
    • 也可以通过npm或yarn等包管理工具进行安装和引入。
  • 基本用法：
    • 传入需要转换的HTML元素（可以是CSS选择器、DOM元素或jQuery对象）。
    • 调用html2canvas函数后，会返回一个Promise对象，当Canvas图像生成后，可以在then方法中进行后续操作。
  1. 常用选项
  • scale：控制生成图片的质量，取值范围为0到1，默认为1。例如，设置scale为0.5时，生成的图片质量为原图的一半。
  • backgroundColor：指定生成的Canvas图像的背景色，可以使用CSS颜色值或十六进制颜色值。
  • useCORS：默认情况下，html2canvas不支持跨域的图片转换。如果需要转换跨域图片，可以设置useCORS选项为true。
  1. 注意事项
  • 兼容性：html2canvas在大多数现代浏览器中都有良好的兼容性，但可能在一些较旧的浏览器或特定环境下存在兼容性问题。
  • 性能：对于较大的HTML元素或复杂的页面结构，转换过程可能会消耗较多的计算资源，并可能导致页面卡顿或崩溃。因此，在使用时需要注意性能优化。
  • 跨域问题：由于浏览器的同源策略限制，当尝试转换跨域的图片时可能会遇到问题。此时，可以通过设置useCORS选项或使用代理服务器等方法来解决。
  1. 示例代码
// 引入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 文档的解决方案。

  1. 定义与功能：
  • html2pdf 是一种工具或库，用于将 HTML 页面转换为 PDF 格式。
  • 它允许开发人员快速、便捷地生成高质量的 PDF 文件，无论是在 Web 网页上还是在服务器环境中。
  1. 技术实现：
  • html2pdf 有多种实现方式，包括使用 PHP 编写的库（如 Html2Pdf、xhtml2pdf 等）以及 JavaScript 实现的库（如 jsPDF 结合 html2canvas）。
  • 这些库通常依赖于其他库（如 TCPDF、html2canvas 等）来辅助实现 HTML 到 PDF 的转换。
  1. 主要特点：
  • 高质量输出：生成的 PDF 文件通常具有良好的排版和格式，能够保留 HTML 中的样式、图像和链接等元素。
  • 灵活性：提供了丰富的选项和配置，可以根据需求进行定制，如设置页面大小、页眉页脚、字体样式等。
  • 跨版本兼容：如 Html2Pdf 支持 PHP 5.6 至 8.2，适配广泛的开发环境。
  • 易用性：提供了简洁的 API 和丰富的示例代码，使得将 HTML 转换为 PDF 变得非常容易。
  1. 应用场景：
  • 发票生成：将动态生成的 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');
		});
	});
});