背景

• 用户在后台上传 pdf 图册文件，前台可以进行 pdf 浏览，浏览方式为左右翻页模式（默认 pdf 是从上到下的），还有其他玩法，本质是花样看图（翻页电子书）。

• 后续又产生了付费需求：可以预览前 5 页，后面图册浏览需要付费查阅。

技术选型

• pdf 文件大小，需要考虑文件的上传速度和页面预览速度

• 浏览方式，要求灵活性，所以要做成图片化浏览

方案 1

• 文件存储采用阿里云 oss 存储，前端服务直接跟 oss 存储交互，实现前端上传与下载，效率最大化（没有中间商赚差价）

• 技术上选择 pdf.js + canvas；上传时，前端解析 pdf 文件后，按页读流，利用 canvas 转化为图片后上传；浏览时，直接对每页的图片进行读取并呈现；

• 前端工作量大，时间不足。

• 更深入思考技术细节：切图后的清晰度问题、图片压缩问题、图片命名规则问题、网络某个图片上传失败问题、大文件 OOM 问题等。

方案 2

• 前端直接将 pdf 进行分片上传至 oss，保留了原 pdf，后续即便出现未知 pdf 故障也可以脚本处理（如图片清晰度问题）

• 后端新增 pdf 处理服务，从 oss 获取 pdf 后处理切图后，再将图片上传 oss

• 前端根据约定规则获取图片信息并呈现

• 前端专注于呈现，屏蔽了一些不必要的数据处理细节

• 用户上传 pdf 后立即进行预览，文件太大的情况下，后端还在处理中，前端可能获取不到图片

前端方案

npm i pdfjs-dist -S

import PDFJS from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
// 这里一定要设置！
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker

// 常用于上传的接口
async function upload(file) {
  // OSS上传逻辑
  ...
  ...
  const array = await file2Array(file.file)
  const pdfDocument = await PDFJS.getDocument(array)
  // 这样就可以拿到pdf的总页数了
  this.filePageSize = pdfDocument.numPages
  this.$emit('change', this.filePageSize)
}


// 这里要借助一个工具类将file文件转为Uint8Array
function file2Array(file) {
  const reader = new FileReader()
  reader.readAsArrayBuffer(file)
  return new Promise((resolve, reject) => {
    reader.onload = async (e) => {
      const array = new Uint8Array(e.target.result) // ArrayBuffer转Uint8Array
      resolve(array)
    }
    reader.onerror = (err) => {
      reject(err)
    }
  })
}

后端方案

技术选型

• pdfbox：是 appach 出品，开源、免费、今年还在更新。

• PDFRenderer：sum 出品，只有一个 2012 年版本0.9.1-patched，不大行的样子

• jpedal：收费

• itext：AGPL / 商业软件的双重许可。AGPL 是免费/开源软件许可证。这并不意味着该软件是免费的！

• ICEPDF：切图后质量不大行，有水印的 pdf，切图后水印会特别清晰。

遇到的问题

java.awt.AWTError: Assistive Technology not found: org.GNOME.Accessibility.AtkWrapper

现象

排查

• 根据报错信息初步判断，这应该是某个类不存在。（大意是说该辅助技术不存在）

• 追溯内部代码，pdf 处理后生成图片使用 java.awt.toolkit 工具包。

• 其初始化采用单例模式，如果有配置 Assistive Technology（辅助技术），则会实例化该辅助技术。

原因

• toolkit 类内部会基于 spi 机制加载辅助技术 assistive_technologies，该辅助技术非必须。

• 该配置文件在 jdk/accessibility.properties 中。

• 本地是 jdk 为 jdk1.8.0_221，无配置 assistive_technologies，无加载问题

• 代码构建平台上基础镜像 jdk 为： java-8-openjdk，其内部配置 assistive_technologies，却无引入具体类，导致第一次初始化时异常。

• 所以，这是一起由 jdk 版本不同/环境不同、引发的问题。

解决

• 第一种：修改 jdk/accessibility.properties 配置： 注释 assistive_technologies

• 第二种：因为内部初始化为单例模式，初始化后 toolkit 对象存在则不在初始化，预先初始化。

java.lang.OutOfMemoryError: Java heap space

现象

造成 OutOfMemoryError 原因一般有 2 种：

• 内存泄露，对象已经死了，无法通过垃圾收集器进行自动回收，通过找出泄露的代码位置和原因，才好确定解决方案；

• 内存溢出，内存中的对象都还必须存活着，这说明 Java 堆分配空间不足，检查堆设置大小（-Xmx 与-Xms），检查代码是否存在对象生命周期太长、持有状态时间过长的情况。

排查

• 启动加入参数：-XX:+HeapDumpOnOutOfMemoryError， 进行对 OOM 日志 dump

• OOM 后进行日志分析，其占用空间为 2 部分：
• 第一部分：原 pdf 所需内存。
• 第二部分：每一页的 pdf 转图片过程需要的内存。（主要内存占用在此部分）

• 针对第一部分，官方倒是有一个配置：MemoryUsageSetting._setupTempFileOnly_();
• 即原 pdf 暂存在外存中，而非内存，减轻主内存暂用。

• 针对第二部分
• 取某一页的 pdf 流，进行解析；解析后的像素数据写入 BufferedImage 中，在调用原生 java.awt.image 画图生成。
• 内部涉及 pdf 的解析、渲染+渲染算法、是否允许下采样等等。

优化总结

• PDDocument.load(file, MemoryUsageSetting.setupTempFileOnly())将 pdf 暂存在本地磁盘，即省出了内存空间；像 100M 的 pdf 就能省 100M 内存呢

• PDFRenderer.renderImageWithDPI(i，72)；降低 dpi，减少 dpi 比例，也可以一定程度上优化，但在呈现上跟原图比会有所缩放。

• PDFRenderer``.setSubsamplingAllowed(``true``);允许下采样，下采样可以在更快、更小的内存密集型情况下使用，但它也可能导致质量的损失，尤其是针对高空间频率的图像

• 通过-Xmx 增加最大堆内存，终极大法，扩大内存

I’m getting an OutOfMemoryError. What can I do? The memory footprint depends on the PDF itself and on the resolution you use for rendering. Some possible options:

• increase the Xmx value when starting java

• use a scratch file by loading files with this code PDDocument.load(file, MemoryUsageSetting.setupTempFileOnly())

• be careful not to hold your images after rendering them, e.g. avoid putting all images of a PDF into a List

• don’t forgot to close your PDDocument objects

• decrease the scale when calling PDFRenderer.renderImage(), or the dpi value when calling PDFRenderer.renderImageWithDPI()

• disable the cache for PDImageXObject objects by calling PDDocument.setResourceCache() with a cache object that is derived from DefaultResourceCache and whose call public void put(COSObject indirect, PDXObject xobject) does nothing. Be aware that this will slow down rendering for PDF files that have an identical image in several pages (e.g. a company logo or a background). More about this can be read in PDFBOX-3700.

文件加密设计

基本流程

加密规则

java 版

/**
 * pdfHelper
 *
 */
public class PdfHelper {
    /**
     * uuid规则构造器
     * 原理：去除最后一位字符，再取剩下最后一位字符为起始值，经过规则转换后，插入第i个位置；
     * 规则：ruleMark
     * 如ABCD,1 -> C ABC 1
     * 如ABCD,2 -> D ABC 2
     *
     * @param sourceUuid 源id
     * @param pageNum    页码 第n页
     * @return 规则后的uuid
     */
    public static String uuidBuilder(String sourceUuid, int pageNum) {
        String splitUuid = sourceUuid.substring(0, sourceUuid.length() - 1);
        String publicMark = splitUuid.substring(splitUuid.length() - 1);
        String ruleMark = ruleMark(publicMark, pageNum);
        int index = pageNum;
        while (index > splitUuid.length()) {
            index = index - splitUuid.length();
        }
        return splitUuid.substring(0, index) + ruleMark + splitUuid.substring(index) + pageNum;
    }

    public static String ruleMark(String mark, int pageNum) {
        String rule = "qwertyuiopasdfghjklzxcvbnm1234567890";
        int index = rule.indexOf(mark) + pageNum;
        while (index > rule.length() - 1) {
            index = index - rule.length();
        }
        char c = rule.charAt(index);
        return String.valueOf(c);
    }

}

javascript 版

/**
 * uuid规则构造器
 * 原理：去除最后一位字符，再取剩下最后一位字符为起始值，经过规则转换后，插入第i个位置；
 * 规则：ruleMark
 * 如ABCD,1 -> C ABC 1
 * 如ABCD,2 -> D ABC 2
 *
 * @param sourceUuid 源id
 * @param pageNum 页码 第n页
 * @return string 规则后的uuid
 */

function uuidBuilder(sourceUuid, pageNum) {
  const ruleMark = (mark, pageNum) => {
    const rule = 'qwertyuiopasdfghjklzxcvbnm1234567890'
    let index = rule.indexOf(mark) + pageNum
    while (index > rule.length - 1) {
      index = index - rule.length
    }
    const c = rule.charAt(index)
    return c
  }
  const splitUuid = sourceUuid.substring(0, sourceUuid.length - 1)
  const publicMark = splitUuid.substring(splitUuid.length - 1)
  const ruleMarkV = ruleMark(publicMark, pageNum)
  let index = pageNum
  while (index > splitUuid.length) {
    index = index - splitUuid.length
  }
  return splitUuid.substring(0, index) + ruleMarkV + splitUuid.substring(index) + pageNum
}

export default uuidBuilder