纯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');
		});
	});
});