问题背景与解决方案概述 在网页应用中，有时我们需要将HTML内容导出为PDF文件。然而，传统的浏览器“打印为PDF”功能通常会保留文本的可选择性，这意味着用户可以轻松复制PDF中的文本内容。对于那些希望保护内容版权、防止未经授权复制或有特殊展示需求（如将页面视为固定布局的图像）的场景，这便成为了一个挑战。
本教程提供一个前端解决方案，通过将html页面内容转换为图像，然后将该图像嵌入到pdf中，从而有效地阻止了pdf文本的直接选择和复制。实现这一目标的关键在于结合使用两个javascript库：html2canvas和printthis。html2canvas负责将指定的html元素渲染成一个canvas图像，而printthis则提供强大的打印功能，能够将这个canvas图像作为打印内容输出，最终通过chrome的“另存为pdf”功能生成不可选中文本的pdf。
核心技术解析
html2canvashtml2canvas是一个JavaScript库，它允许您在用户的浏览器中直接将DOM元素（或整个页面）渲染成一个Canvas图像。它的工作原理是遍历DOM树，收集样式信息，然后将这些信息绘制到Canvas上。这个过程不依赖于服务器端渲染，完全在客户端完成。通过html2canvas生成的Canvas，其内容本质上就是一张图片，因此其中的文本不再是可选择的字符流。
printThisprintThis是一个jQuery插件，它提供了一个简洁的API来控制打印行为。它可以打印HTML元素、iframe内容，甚至可以直接打印Canvas元素。通过printThis，我们可以精确控制哪些内容需要被打印，以及如何打印，例如指定打印区域、是否包含样式等。在本方案中，它被用于接收html2canvas生成的Canvas，并将其作为打印内容。
实现步骤与代码示例
立即学习“前端免费学习笔记（深入）”；
为了实现将HTML内容转换为不可选中文本的PDF，我们需要按照以下步骤操作：
-
引入必要的库 在您的HTML文件中，首先需要引入jQuery、html2canvas和printThis这三个库。建议使用CDN链接以方便快捷地集成。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML到不可选中文本PDF教程</title> <!-- 引入 jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- 引入 html2canvas --> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> <!-- 引入 printThis --> <script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.min.js"></script> <style> body { font-family: Arial, sans-serif; margin: 20px; } #page { border: 1px solid #ccc; padding: 20px; max-width: 800px; margin: 0 auto; } img { max-width: 100%; height: auto; display: block; margin-top: 15px; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; margin-top: 20px; } </style> </head> <body> <div id="page"> <h1>教程标题：HTML页面转换为不可选中文本的PDF</h1> <p>这是一段示例文本，通常情况下，在浏览器打印为PDF后，这段文字是可以被选中和复制的。</p> <p>通过本教程的方法，您将能够生成一个PDF，其中包含的文本将以图像形式呈现，从而无法直接复制。</p> <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> </ul> @@##@@ <p>更多内容...</p> </div> <button onclick="printUnselectablePdf()">生成不可选中文本PDF</button> <script> function printUnselectablePdf() { // 选中需要转换为图片并打印的HTML元素，这里是id为'page'的div html2canvas(document.querySelector("#page")).then(canvas => { // 将生成的Canvas元素作为参数传递给printThis // printThis会创建一个新的打印窗口/iframe，并将Canvas内容渲染进去 $(canvas).printThis({ canvas: true // 关键参数：指示 printThis 处理的是一个 Canvas 元素 }); }); } </script> </body> </html> -
编写JavaScript代码 在页面加载完成后，您需要调用html2canvas来渲染目标HTML元素，然后将生成的Canvas传递给printThis。
// 示例函数，可以在按钮点击时调用 function printUnselectablePdf() { // 选中需要转换为图片并打印的HTML元素，这里是id为'page'的div html2canvas(document.querySelector("#page")).then(canvas => { // 将生成的Canvas元素作为参数传递给printThis // printThis会创建一个新的打印窗口/iframe，并将Canvas内容渲染进去 $(canvas).printThis({ canvas: true // 关键参数：指示 printThis 处理的是一个 Canvas 元素 }); }); }
代码详解
- document.querySelector("#page"): 这行代码选中了HTML文档中id为page的元素。这个元素包含了所有您希望转换为不可选中文本PDF的内容。您可以根据自己的页面结构调整选择器。
- html2canvas(...).then(canvas => { ... }): html2canvas是一个异步函数，它返回一个Promise。当HTML内容成功渲染成Canvas后，Promise会被解析，并返回一个Canvas DOM对象。
- $(canvas).printThis({ canvas: true }):
- $(canvas): 由于printThis是一个jQuery插件，我们需要将Canvas DOM对象包装成jQuery对象。
- printThis({ canvas: true }): 这是调用printThis方法。其中，canvas: true是一个至关重要的配置参数。它告诉printThis插件，传入的内容是一个Canvas元素，printThis会相应地处理它，将其作为图像进行打印。
当上述代码执行后，浏览器会弹出一个打印预览窗口。在这个预览窗口中，您会发现原先的HTML内容现在显示为一张图片，文本不再可选中。此时，选择“目标”为“另存为PDF”，即可生成一个文本不可选的PDF文件。
注意事项
- 性能考量：html2canvas在处理非常复杂或包含大量元素的页面时，可能会消耗较多的CPU资源和时间。对于大型页面，可能需要优化HTML结构或考虑分块渲染。
- 可访问性：将文本内容转换为图像会牺牲可访问性。屏幕阅读器将无法读取这些图像中的文本内容。如果您的应用需要高度的可访问性，请谨慎使用此方法。
- 文本提取的局限性：虽然此方法可以阻止用户直接复制粘贴文本，但并不能完全阻止所有形式的文本提取。高级用户仍可能使用OCR（光学字符识别）工具从生成的PDF图像中识别并提取文本。本方法旨在阻止“轻松”的复制行为。
- 图片加载：html2canvas在渲染时会尝试加载页面中的所有图片。如果图片加载失败或存在跨域问题，可能会导致Canvas渲染不完整。确保所有图片都能正确加载，并处理
