问题背景与解决方案概述 在网页应用中，有时我们需要将HTML内容导出为PDF文件。然而，传统的浏览器“打印为PDF”功能通常会保留文本的可选择性，这意味着用户可以轻松复制PDF中的文本内容。对于那些希望保护内容版权、防止未经授权复制或有特殊展示需求（如将页面视为固定布局的图像）的场景，这便成为了一个挑战。

本教程提供一个前端解决方案，通过将html页面内容转换为图像，然后将该图像嵌入到pdf中，从而有效地阻止了pdf文本的直接选择和复制。实现这一目标的关键在于结合使用两个javascript库：html2canvas和printthis。html2canvas负责将指定的html元素渲染成一个canvas图像，而printthis则提供强大的打印功能，能够将这个canvas图像作为打印内容输出，最终通过chrome的“另存为pdf”功能生成不可选中文本的pdf。

核心技术解析

1. html2canvashtml2canvas是一个JavaScript库，它允许您在用户的浏览器中直接将DOM元素（或整个页面）渲染成一个Canvas图像。它的工作原理是遍历DOM树，收集样式信息，然后将这些信息绘制到Canvas上。这个过程不依赖于服务器端渲染，完全在客户端完成。通过html2canvas生成的Canvas，其内容本质上就是一张图片，因此其中的文本不再是可选择的字符流。

2. printThisprintThis是一个jQuery插件，它提供了一个简洁的API来控制打印行为。它可以打印HTML元素、iframe内容，甚至可以直接打印Canvas元素。通过printThis，我们可以精确控制哪些内容需要被打印，以及如何打印，例如指定打印区域、是否包含样式等。在本方案中，它被用于接收html2canvas生成的Canvas，并将其作为打印内容。

实现步骤与代码示例

立即学习“前端免费学习笔记（深入）”；

为了实现将HTML内容转换为不可选中文本的PDF，我们需要按照以下步骤操作：

1. 引入必要的库 在您的HTML文件中，首先需要引入jQuery、html2canvas和printThis这三个库。建议使用CDN链接以方便快捷地集成。

   
   
   
       
       
       
       
       
       
       
       
       
       
   
   
       
   
           
   教程标题：HTML页面转换为不可选中文本的PDF
           
   这是一段示例文本，通常情况下，在浏览器打印为PDF后，这段文字是可以被选中和复制的。
   
   							
   
   								
   								
   
   									秘塔AI搜索
   									
   秘塔AI搜索，没有广告，直达结果
   								
   								下载 
   							
   						
           
   通过本教程的方法，您将能够生成一个PDF，其中包含的文本将以图像形式呈现，从而无法直接复制。
           
   
               
   列表项一
               
   列表项二
               
   列表项三
           
           @@##@@
           
   更多内容...
       
   
       生成不可选中文本PDF
   
       
   
   

2. 编写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文件。

注意事项

1. 性能考量：html2canvas在处理非常复杂或包含大量元素的页面时，可能会消耗较多的CPU资源和时间。对于大型页面，可能需要优化HTML结构或考虑分块渲染。
2. 可访问性：将文本内容转换为图像会牺牲可访问性。屏幕阅读器将无法读取这些图像中的文本内容。如果您的应用需要高度的可访问性，请谨慎使用此方法。
3. 文本提取的局限性：虽然此方法可以阻止用户直接复制粘贴文本，但并不能完全阻止所有形式的文本提取。高级用户仍可能使用OCR（光学字符识别）工具从生成的PDF图像中识别并提取文本。本方法旨在阻止“轻松”的复制行为。
4. 图片加载：html2canvas在渲染时会尝试加载页面中的所有图片。如果图片加载失败或存在跨域问题，可能会导致Canvas渲染不完整。确保所有图片都能正确加载，并处理