如何使用jQuery在客户端上传前压缩PDF等类型的文件

核心实现思路 #

• jQuery仅负责文件选择监听、上传交互逻辑，本身不具备PDF处理能力，压缩能力依赖纯前端PDF处理库实现
• 压缩逻辑核心为：降采样PDF内嵌图片、移除冗余元数据、合并重复字体、调整PDF存储压缩等级
• 压缩完成后通过jQuery AJAX提交压缩后的文件到后端接口

具体实现步骤 #

1. 依赖引入 #

提前将所需的前端库下载到本地静态资源目录后按顺序引入：先引入jQuery，再引入PDF处理库（支持PDF解析、编辑的纯前端JS库均可，无需依赖后端服务）。

2. 页面结构示例 #

<input type="file" id="pdfUpload" accept=".pdf">
<button id="uploadBtn">上传压缩后PDF</button>
<progress id="progressBar" value="0" max="100"></progress>

3. 核心逻辑代码 #

// 绑定文件选择事件
$('#pdfUpload').on('change', async function(e) {
  const originFile = e.target.files[0];
  if (!originFile || originFile.type !== 'application/pdf') {
    alert('请选择PDF格式文件');
    return;
  }
  let compressedFile = null;

  // 读取原PDF文件内容
  const fileBuffer = await originFile.arrayBuffer();
  const pdfDoc = await PDFLib.PDFDocument.load(fileBuffer, {
    ignoreEncryption: true
  });

  // 执行压缩操作
  const pageList = pdfDoc.getPages();
  // 降采样所有内嵌图片
  for (const page of pageList) {
    const imageResources = page.getXObjects();
    for (const key in imageResources) {
      const resource = imageResources[key];
      if (resource instanceof PDFLib.PDFImage) {
        // 按0.6比例压缩图片质量，可根据需求调整
        const compressedImg = await resource.scale(0.6);
        page.drawImage(compressedImg, {
          x: resource.x,
          y: resource.y,
          width: compressedImg.width,
          height: compressedImg.height
        });
        page.removeXObject(key);
      }
    }
  }
  // 移除冗余元数据
  pdfDoc.setTitle('');
  pdfDoc.setAuthor('');
  pdfDoc.setSubject('');
  pdfDoc.setKeywords([]);
  pdfDoc.setProducer('');
  pdfDoc.setCreator('');

  // 导出压缩后的PDF文件
  const compressedPdfBytes = await pdfDoc.save({
    useObjectStreams: false,
    compress: true
  });
  compressedFile = new File([compressedPdfBytes], `compressed_${originFile.name}`, {
    type: 'application/pdf'
  });

  // 绑定上传事件
  $('#uploadBtn').off('click').on('click', function() {
    if (!compressedFile) return;
    const formData = new FormData();
    formData.append('upload_file', compressedFile);

    $.ajax({
      url: '/你的后端上传接口地址',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      xhr: function() {
        const xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener('progress', function(e) {
          if (e.lengthComputable) {
            const percent = Math.round((e.loaded / e.total) * 100);
            $('#progressBar').val(percent);
          }
        });
        return xhr;
      },
      success: function(res) {
        alert('上传成功');
      },
      error: function(err) {
        alert('上传失败，请重试');
      }
    });
  });
});

注意事项 #

• 如需压缩图片类文件，可直接替换PDF处理逻辑为图片压缩库的调用逻辑即可
• 建议限制用户上传的原文件大小不超过50M，过大的文件压缩会占用较多浏览器内存，可能导致页面卡顿
• 加密、有编辑权限限制的PDF无法在前端直接压缩，需要提前提示用户解除限制后再上传

内容的提问来源于stack exchange，提问作者santosh ghimire