前端PDF批量打印实战：Base64流转与print.js应用

1. 为什么前端打印PDF这么“折腾”？

最近在做一个项目，需要批量打印用户上传的PDF文件。听起来很简单对吧？不就是点个打印按钮嘛。但实际做起来，才发现这里面的水还挺深。一开始，我们团队也想过在前端把所有PDF文件合并成一个，然后一次性打印。想法很美好，但现实是，用户上传的可能不只是PDF，还有图片、Word转的PDF，格式五花八门。在前端做合并，不仅要引入一堆像pdf-lib、pdf-merger-js这样的库，还得处理各种兼容性和性能问题，页面卡顿不说，内存占用也蹭蹭往上涨，用户体验直接打折扣。

踩过这个坑之后，我们果断调整了方案：让专业的人干专业的事。把PDF的合并、格式统一、水印添加这些重逻辑、耗性能的操作，统统交给后端去处理。后端处理完，生成最终的PDF文件，再返回给前端。那问题来了，后端怎么把文件传给前端呢？直接传文件流？在HTTP协议里，二进制文件流传输起来并不“友好”。这时候，Base64编码就闪亮登场了。它可以把二进制数据（比如PDF文件）编码成纯文本字符串，这样就能像普通文本一样，通过JSON接口轻松返回给前端。前端拿到这个Base64字符串，再把它“还原”成PDF文件，最后调用打印。这个“接收-解码-打印”的完整链路，就是我们今天要聊的核心。

所以，这个场景非常典型：后端返回PDF的Base64流，前端用print.js实现批量打印。它完美避开了前端处理文件的复杂性，把渲染和合并的压力转移到了服务端，前端只负责轻量的展示和触发打印，架构清晰，性能也更优。接下来，我就带你一步步拆解这个方案，从原理到代码，手把手实现一个稳定可靠的批量打印功能。

2. 核心基石：彻底搞懂Base64与Blob

要想玩转这个流程，必须先把Base64和Blob这两个概念吃透。很多朋友只是照搬代码，一旦出问题就懵了。咱们今天把它掰开揉碎了讲。

2.1 Base64：二进制数据的“文本化身份证”

你可以把Base64想象成一个翻译官。计算机底层存储和传输的都是0和1组成的二进制数据，但像JSON、XML这些文本协议，没法直接携带二进制。Base64的作用，就是把一段二进制数据（比如一张图片、一个PDF），按照特定规则，翻译成由A-Z、a-z、0-9、+、/这64个字符（这也是Base64名字的由来）组成的文本字符串。

举个例子：一个很小的PDF文件，它的二进制数据可能是01010100 01100101 ...这样一长串。经过Base64编码后，就变成了类似JVBERi0xLjQK...这样的字符串。这个字符串可以被安全地放在JSON里：{ "pdfData": "JVBERi0xLjQK..." }。后端传给我们前端的，就是这个字符串。

这里有个超级常见的坑：这个Base64字符串有时会包含换行符\n或\r。这些换行符可能是编码时自动添加的，目的是为了满足MIME协议每76个字符换行的规范。但我们在前端解码时，必须先把它们去掉，否则解码会失败。这就是为什么你会在很多代码里看到code = code.replace(/[\n\r]/g, '')这一行，它就是在做清理工作。

2.2 Blob：前端世界的“文件替身”

前端拿到了Base64字符串，怎么让它变回一个浏览器能识别、能打印的PDF文件呢？这就需要Blob（Binary Large Object）对象了。Blob是浏览器提供的一个原生对象，它可以用来表示一个不可变的、原始数据的类文件对象。

简单说，Blob就是在前端内存中创建了一个“虚拟文件”。我们告诉浏览器：“嘿，这里有一段二进制数据，它的类型是application/pdf，你把它当做一个PDF文件来处理吧”。浏览器就会生成一个指向这片内存区域的引用，也就是一个Blob URL。

生成Blob的关键一步，是把Base64字符串解码回原始的二进制数据。我们用window.atob()方法进行解码，得到原始的二进制字符串。然后，我们需要把这个字符串转换成浏览器更擅于处理的Uint8Array（8位无符号整型数组）。最后，用这个数组和文件类型{ type: 'application/pdf' }作为参数，new一个Blob实例出来。这个Blob对象，就是我们后续所有操作（预览、打印、下载）的源头。

3. 实战第一步：从Base64到可打印的PDF

理论说再多，不如一行代码。我们直接来看最核心的转换函数。我把自己在项目中反复打磨过的代码分享给你，并附上详细的注释和踩坑点。

/**
 * 将Base64字符串转换为PDF Blob对象，并准备打印
 * @param {string} base64String - 后端返回的、干净的Base64编码字符串
 */
function preparePdfForPrinting(base64String) {
  // 1. 清洗数据：移除可能存在的换行符和回车符
  // 这是至关重要的一步