该方案使用纯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');
});
});
});
