PHP/JS实现PDF按页分割交互功能的技术咨询

整体流程梳理 #

• 上传PDF文件 → 后端用ImageMagick转每页为JPG → 前端网格展示JPG并附带分割标识 → 用户点击标记分割点 → 计算拆分范围 → 后端用pdftk生成对应拆分PDF → 提供下载

前端交互实现（核心） #

1. 网格布局展示JPG #

用CSS Grid实现响应式网格，适配不同屏幕：

.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  padding: 1rem;
}
.page-card {
  text-align: center;
}
.page-card img {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 4px;
}
.split-marker {
  margin-top: 0.5rem;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  background: #fff;
  border: 1px solid #007bff;
  border-radius: 4px;
}
.split-marker.active {
  background: #007bff;
  color: #fff;
}

2. 分割标识交互逻辑 #

用原生JS维护分割点数组，点击标记时切换选中状态，实时计算拆分范围：

// 全局状态：总页数、分割点数组
let totalPages = 0;
let splitPoints = [];

// 绑定所有分割标记的点击事件
document.querySelectorAll('.split-marker').forEach(btn => {
  btn.addEventListener('click', function() {
    const pageNum = parseInt(this.dataset.page);
    const index = splitPoints.indexOf(pageNum);
    
    if(index > -1) {
      // 取消分割标记
      splitPoints.splice(index, 1);
      this.classList.remove('active');
    } else {
      // 添加分割标记
      splitPoints.push(pageNum);
      this.classList.add('active');
    }
    
    // 更新页面上的拆分范围展示
    updateSplitRanges();
  });
});

// 计算并展示拆分范围
function updateSplitRanges() {
  const ranges = calculateRanges(splitPoints, totalPages);
  document.getElementById('range-display').textContent = ranges.join(', ');
}

// 核心范围计算函数
function calculateRanges(splitPoints, totalPages) {
  const sortedPoints = [0, ...splitPoints.sort((a, b) => a - b), totalPages];
  const ranges = [];
  
  for(let i = 1; i < sortedPoints.length; i++) {
    const start = sortedPoints[i-1] + 1;
    const end = sortedPoints[i];
    if(start <= end) {
      ranges.push(start === end ? `${start}` : `${start}-${end}`);
    }
  }
  return ranges;
}

3. 提交拆分请求 #

用户确认范围后，将splitPoints数组发送给后端，后端据此生成拆分后的PDF包。

后端工具链实现 #

1. PDF转JPG（ImageMagick） #

支持命令行直接调用，或通过语言封装库实现：

• 命令行示例：

# 生成每页JPG，分辨率150DPI，质量80
convert -density 150 "uploaded.pdf" -quality 80 "page-%03d.jpg"

• Node.js（gm库）示例：

const gm = require('gm').subClass({ imageMagick: true });
gm('uploaded.pdf')
  .density(150)
  .quality(80)
  .write('page-%03d.jpg', (err) => {
    if(err) console.error(err);
    // 转换完成后通知前端
  });

• Python（wand库）示例：

from wand.image import Image

with Image(filename='uploaded.pdf', resolution=150) as img:
    img.compression_quality = 80
    img.save(filename='page-%03d.jpg')

2. PDF拆分（pdftk） #

根据前端传入的范围，循环执行拆分命令：

• 命令行示例：

# 拆分1-2页
pdftk "uploaded.pdf" cat 1-2 output "split_1-2.pdf"
# 拆分单页
pdftk "uploaded.pdf" cat 5 output "split_5.pdf"

• Node.js执行命令：

const { exec } = require('child_process');
const ranges = ['1-2', '3-5', '6']; // 前端传入的范围数组
ranges.forEach((range, idx) => {
  exec(`pdftk uploaded.pdf cat ${range} output split_${idx+1}.pdf`, (err) => {
    if(err) console.error(err);
  });
});

关键注意事项 #

• 临时文件清理：转JPG和拆分后的PDF属于临时文件，需定期清理（比如用户下载后立即删除，或用定时任务批量清理）。
• 性能优化：大PDF转JPG时采用异步处理，避免阻塞主线程；前端图片开启懒加载（loading="lazy"）提升加载速度。
• 安全性：校验上传文件是否为PDF，限制文件大小；对用户传入的范围做格式校验（仅允许数字和'-'），避免命令注入攻击。

内容的提问来源于stack exchange，提问作者Mirko Babic