如何获取浏览器中正在编辑的PDF的Blob对象？

核心思路 #

直接在浏览器端完成「解析第三方PDF→修改内容→生成Blob」的全流程，不用依赖后端中转，最终把编辑后的Blob提交到你的服务器。

方案一：用pdf-lib实现（最推荐，专业PDF编辑） #

pdf-lib是前端处理PDF编辑的首选库，支持加载现有PDF、添加文本/图片/表单字段，还能保留原始PDF的矢量结构，API也比较直观。

示例代码

// 1. 从第三方服务器拉取原始PDF
async function getOriginalPDF() {
  const res = await fetch('第三方PDF的地址');
  return res.arrayBuffer();
}

// 2. 编辑PDF并生成Blob
async function modifyPDF() {
  const { PDFDocument, StandardFonts, rgb } = PDFLib;
  
  // 加载原始PDF文件
  const rawPdfBytes = await getOriginalPDF();
  const pdfDoc = await PDFDocument.load(rawPdfBytes);
  
  // 嵌入默认字体（也可以加载自定义字体的ArrayBuffer）
  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
  
  // 获取要编辑的页面（这里取第一页，多页的话循环处理即可）
  const firstPage = pdfDoc.getPages()[0];
  const { width, height } = firstPage.getSize();
  
  // 添加普通文本：参数依次是内容、字体、大小、坐标、颜色
  firstPage.drawText('这是新增的文本', {
    x: 50,
    y: height - 50,
    size: 14,
    font,
    color: rgb(0, 0, 0),
  });
  
  // 添加带样式的文本（比如红色高亮）
  firstPage.drawText('红色高亮文本', {
    x: 50,
    y: height - 80,
    size: 16,
    font,
    color: rgb(1, 0, 0),
  });
  
  // 生成修改后的PDF字节流，转成Blob
  const modifiedBytes = await pdfDoc.save();
  const pdfBlob = new Blob([modifiedBytes], { type: 'application/pdf' });
  
  // 提交到自己的服务器
  await uploadToServer(pdfBlob);
}

// 3. 提交Blob到我方服务器的函数
async function uploadToServer(blob) {
  const formData = new FormData();
  formData.append('edited_pdf', blob, 'edited.pdf');
  
  await fetch('你的服务器上传接口', {
    method: 'POST',
    body: formData,
  });
}

// 启动编辑流程
modifyPDF().catch(err => console.log('编辑失败:', err));

方案二：pdf.js+jsPDF（适合简单修改） #

如果只是要加个水印、简单文本，也可以用pdf.js把PDF渲染到Canvas，在Canvas上编辑后，再用jsPDF转成PDF Blob。缺点是会把原始PDF转成位图，丢失矢量信息。

示例代码

async function editPDFViaCanvas() {
  // 1. 用pdf.js加载PDF并渲染到Canvas
  const pdf = await pdfjsLib.getDocument('第三方PDF地址').promise;
  const page = await pdf.getPage(1);
  const viewport = page.getViewport({ scale: 2 }); // 用2倍分辨率避免模糊
  
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = viewport.width;
  canvas.height = viewport.height;
  
  await page.render({ canvasContext: ctx, viewport }).promise;
  
  // 2. 在Canvas上画文本
  ctx.font = '16px Arial';
  ctx.fillStyle = 'blue';
  ctx.fillText('Canvas添加的水印', 100, 100);
  
  // 3. 用jsPDF生成新的PDF Blob
  const jsPdf = new jsPDF('p', 'px', [viewport.width, viewport.height]);
  jsPdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, viewport.width, viewport.height);
  
  const pdfBlob = jsPdf.output('blob');
  
  // 提交到服务器
  await uploadToServer(pdfBlob);
}

注意点 #

• 跨域问题：如果第三方服务器没开CORS，得让你的后端做个代理，前端请求自己的代理接口拿PDF。
• 自定义字体：如果要用到特殊字体，需要把字体文件转成ArrayBuffer，再用pdf-lib嵌入。
• 复杂编辑：如果要修改原始PDF里的已有文本、删除内容，pdf-lib也支持，但得了解PDF的内部结构，操作起来会复杂些。

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